Вложенная поплавка/вложенная строка внутри столбца

Question

Я пытаюсь выровнять два стола бок о бок в плавающем левом div. Я думаю, что у меня есть способ горизонтального выравнивания divs в целом с float, но в моем примере ниже, как только я создаю 3 столбца, все плавающие влево, я не могу получить две таблицы в третьем столбце в div.nestedHorizontalTables для отображения бок о бок. Я попробовал отображение: встроенный блок, но они по-прежнему сохраняют вертикальное размещение.

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.