列内的嵌套浮点/嵌套行答案

【问题标题】：nested float/nested row inside a column列内的嵌套浮点/嵌套行
【发布时间】：2015-03-09 14:17:06
【问题描述】：

我正在尝试在浮动的左 div 中并排对齐两个表格。我想我已经掌握了如何将 div 与浮动水平对齐，但在下面的示例中，一旦我创建 3 列，全部向左浮动，我无法在 div.nestedHorizontalTables 的第 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%;
}

谢谢

【问题讨论】：

标签： html css css-float

【解决方案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>

你可以试试这个

【讨论】：

【解决方案2】：

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

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

Here is a jsFiddle to help you.

【讨论】：