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

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; 
}