CSS div 布局代替表格答案

【问题标题】：CSS div layouts in place of tablesCSS div 布局代替表格
【发布时间】：2017-01-03 03:49:28
【问题描述】：

有没有办法在没有表格的情况下让三个或四个元素相互对齐，如下所示：

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

【问题讨论】：

标签： html css alignment css-tables

【解决方案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 为例。基本上，您将“左栏”浮动在左侧，并让您的内容存在于右侧。

【讨论】：

非常感谢！虽然我没有使用您的确切实现，但您的示例确实让我对浮动有了更好的理解，并向我介绍了浮动清除，我什至不知道它存在。这些结合起来让我完成了我的主题，这让我很放松。 +1 是一个很好的例子，还有 jsfiddle 让我自己玩。非常感谢！

【解决方案2】：

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

【讨论】：

旁边的内容怎么样？这就是我真正在努力解决的问题。我试过左浮动，右浮动，跨度，div，一切都无济于事