我想水平和垂直安排表，包含在水平

Question

我想安排兩個rows.I 8個表安排兩個div有兩個div水平神韻：
我想對齊
4表中的行1
第2行中的4個表格

當我嘗試將下面的代碼放在另一個[left] DIV容器中時。所有的表都在一行中。以下是我正在使用的代碼。

<div class="datagrid"><table> 
    <thead><tr><th>header</th><th>header</th></tr></thead> 
    <tbody><tr><td>data</td><td>data</td></tr> 
    <tr class="alt"><td>data</td><td>data</td></tr> 
    <tr><td>data</td><td>data</td></tr> 
    <tr class="alt"><td>data</td><td>data</td></tr> 
    <tr><td>data</td><td>data</td></tr> 
    </tbody> 
    </table></div> 

請在這個問題上指導我。如果需要，我可以上傳我正在使用的完整代碼。

Answer 1

你可以實現，它通過添加父容器的前4桌，另外一個在接下來的4，就像這樣：

<div class="group"> 
    <div class="datagrid">table 1</div> 
    <div class="datagrid">table 2</div> 
    <div class="datagrid">table 3</div> 
    <div class="datagrid">table 4</div> 
</div> 
<div class="group"> 
    <div class="datagrid">table 1</div> 
    <div class="datagrid">table 2</div> 
    <div class="datagrid">table 3</div> 
    <div class="datagrid">table 4</div> 
</div> 

然後，添加這些樣式規則：

.datagrid { 
    float: left; 
} 

.group { 
    clear: both; 
} 

Answer 2

使用浮球並清除。 查找的jsfiddle

Js Fiddle

CSS樣式的完整代碼

.datagrid{ 
float:left; 
} 
.firstRow{ 
} 
.secoudRow{ 
clear:both; 
}