html - 列内的嵌套 float /嵌套行

Question

我正在尝试在 float 的左侧 div 中并排对齐两个表格。我想我已经掌握了如何将 div 通常与 float 水平对齐，但在下面的示例中，一旦我创建了 3 列，所有列都向左浮动，我就无法显示 div.nestedHorizo​​ntalTables 中第 3 列中的两个表并排。我试过 display:inline-block 但它们仍然垂直堆叠。

html

<div class="main-content">
    <div class="column1">
        <table>table1</table>
    </div>
    <div id="column2">
    <!--I want a group of 4 vertical pie charts here-->
        <div id="pie1"></div>
        <div id="pie2"></div>
        <div id="pie3"></div>
        <div id="pie4"></div>
    </div>
    <div id="column3">
        <div class="nestedHorizontalTables">
            <table id="tab2">table2</table>
            <table id="tab3">table3</table>
        </div>
        <table>Table4</table>
        <div class="nestedHorizontalPieAndTable">
            <table>table5</table>
            <div id="pie6"></div>
        </div>
    </div>
</div>

CSS

#column1{
     float:left;
     width:40%;
 }
#column2{
     float:left;
     width:20%;
 }
#column3{
     float:left;
     width:40%;
}
.nestedHorizontalTables{
     display:inline-block;
}
#tab2{
     width:80%;
}
#tab3{
     width:20%;
}

谢谢

Answer 1

.main-content
{
  margin:0;
  padding:0;
  float:left;
  width:100%;
}
.column1 {
  margin:0;
  float: left;
  width: 40%;
}
#column2 {
  margin:0;
  float: left;
  width: 20%;
}
#column3 {
  margin:0;
  float: left;
  width: 40%;
}
.nestedHorizontalTables {
  display: inline-block;
}
#tab2 {
  width: 80%;
}
#tab3 {
  width: 20%;
}

<div class="main-content">
  <div class="column1">
    <table>table1</table>
  </div>
  <div id="column2">
    <!--I want a group of 4 vertical pie charts here-->
    <div id="pie1">hello</div>
    <div id="pie2"></div>
    <div id="pie3"></div>
    <div id="pie4"></div>
    
  </div>
  <div id="column3">
    <div class="nestedHorizontalTables">
      <table id="tab2">table2</table>
      <table id="tab3">table3</table>
    </div>
    <table>Table4</table>
    <div class="nestedHorizontalPieAndTable">
      <table>table5</table>
      <div id="pie6"></div>
    </div>
  </div>
</div>

你可以试试这个