html - 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 */
}

​</p>

我以JSFiddle为例。基本上，您将“左栏”浮动在左侧，并让您的内容存在于右侧。

Answer 2

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