Question

我试图在两行中排列8个表。我有两个水平排列的div。我正在尝试对齐
行1中的4个表第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 style

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

我想水平和垂直排列表格，包含在水平排列的两个DIV中

2 个答案: