CSS div布局代替表格

Question

有没有办法可以在没有表格的情况下获得三个或四个元素，以便彼此对齐：

我问这个是因为目前我正在使用桌子，但桌子拒绝允许我将“测试”盒子设置为特定高度，并使填充物成为实际填充空间的填充物。目前，它只允许填充物具有指定的高度，并要求“测试”框填充所有剩余空间。如果你能找到一种方法来设置表格底行的高度，那么我也会接受这个作为答案，但我认为最好的方法可能就是使用css布局

Answer 1

是。您可以使用一系列div来模拟类似于表格的布局，如截图中所示。

例如，您的HTML布局将是这样的：

<div class="header"><p>Top bar</p></div>
<div class="wrapper">
    <div id="leftCol">
        <div id="topLeft">Top Left</div>
        <div id="centerLeft">Filler</div>
        <div id="bottomLeft">Test</div>
    </div>

    <div id="rightCol">
        <p>SPAM!</p>                
        <div class="clear"></div>
    </div>
</div>​

然后你应用样式：

.clear {
    clear: both;
}


#leftCol {
    float: left;
    width: 300px; /* explicit width on left column */
}

#topLeft {
    height: 100px; /* arbitrary height of top left spot; do not define for auto-sizing */
}

#centerLeft {
    height: 50px; /* another arbitrary height */
}

#bottomLeft {
    height: 200px; /* another arbitrary height */
}

我以JSFiddle为例。基本上你是在左边漂浮你的“左栏”，让你的内容存在于右边。

Answer 2

是的，只需确保将每个div的左边距和宽度设置为相同，然后您可以更改顶部和底部边距以使其符合您的要求。这样，您还可以更改任何div的高度