我正在尝试使用 div 和 CSS 创建一种表格。我让它看起来正确,但如果我复制下面的表格,它就不再正确排列了。
HTML:
<div class="outer">
<div class="main_right">
<div class="top">
<div class="top_right">top right</div>
<div class="top_left">top left</div>
</div>
<div class="bottom">
<div class="right">right1</div>
<div class="left">
<table>
<tr>
<td>left 1</td>
<td>left 2</td>
</tr>
<tr>
<td>left 1</td>
<td>left 2</td>
</tr>
</table>
</div>
<div class="right">right2</div>
<div class="left">
<table>
<tr>
<td>left 1</td>
<td>left 2</td>
</tr>
<tr>
<td>left 1</td>
<td>left 2</td>
</tr>
</table>
</div>
</div>
</div>
<div class="main_left">main left</div>
</div>
<br>
CSS:
.outer {
width: 800px;
}
.main_left {
width:200px;
background:red;
}
.main_right {
float:right;
width:600px;
}
.top_left {
background:blue;
width: 400px;
}
.top_right {
background:purple;
float: right;
width:200px;
}
.left {
background:yellow;
width: 350px;
}
.right {
background:green;
float: right;
width: 250px;
}
我正在尝试让第二个红色“main left”与第二个蓝色“top left”对齐。我希望每个“外部”div 都是它自己的表,这样我就可以在垂直列表中复制任意多个,中间有空格。
我在 CSS 中缺少什么?
最佳答案
您现在可以使用 the display:table
and related display types for elements. 在没有 float 的情况下实际执行此操作
唯一的区别是您需要更改数据以匹配表格的行 > 列设置,而不是您目前拥有的列 > 行设置。
如果你只是想让三列正确定位,你可以使用类似下面的东西将每个内部 div 设置为一个列,在外部 div 中。
div.outer { display:table-row}
div.outer > div { display:table-cell}
关于html - 如何像表格一样定位嵌套的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23508529/