列中的嵌套浮点/嵌套行

Question

我正在尝试将两个表并排放置在浮动的左侧div中。我想我已经有了如何水平对齐div一般与浮点数，但在下面的例子中，一旦我创建3列，所有浮动左，我不能得到div.nestedHorizo​​ntalTables中的第3列中的两个表来显示并排。我试过显示：内联块，但它们仍然保持垂直堆叠。

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>

你可以试试这个

Answer 2

如果您只想并排显示nestedHorizontalTables中的两个表格，请将float:left添加到两个表格中。

#tab2 {
    width:80%;
    float:left;
}
#tab3 {
    width:20%;
    float:left;
}

Here is a jsFiddle to help you.