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

我做了一个 JSFiddle举个例子。基本上你是在左边 float 你的“左栏”，让你的内容存在于右边。