Question

我正在尝试练习一些CSS / HTML，我列出了使用divs在表格中应该做什么。

我遇到的问题是，当我设置边距时，文本没有正确排列到列中，因为某些文本比其他文本长，因此会产生锯齿状的表格。

e.g。

123 hello coool
123 asdfasdfsadf  cool
123 hello coool
123 asdfasdfasdf  kkk

因此每个部分之间的间距是正确的，即20px，但由于文本长度不同，因此看起来不对齐。

这里有什么问题？这个问题有方法解决吗（我知道一张桌子会让它更容易，但我想学习div方式）

Answer 1

你如何让你的div彼此排列 - 也就是说，模拟行？如果你使用浮子，例如float: left，那么您遇到的效果通常称为收缩包装。在收缩包装的div中，div的宽度将自动对应于内容的长度。

唯一纯粹的html / css方法是明确设置width的{{1}}属性。您需要将列中的每个div设置为相同的显式宽度。为了使其有效，您需要了解内容的长度，并至少将divs设置为宽。

如果您希望某列中的每个width动态继承最终内容最长的div的宽度，则必须使用javascript。

Answer 2

您可能没有为它们分配固定宽度，导致它们只是自动调整大小。表格将自动使列中的每个单元格具有相同的宽度，但不能使用s来完成，您需要设置固定的宽度。

Answer 3

您可以将每列设为自己的div。 EG：

<div class="col1">
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
<div class="col1">
    <p>hello</p>
    <p>asdfasdfasdf</p>
    <p>hello</p>
    <p>asdfasdfasdf</p>
</div>
<div class="col1">
    <p>cooool</p>
    <p>cooool</p>
    <p>cooool</p>
    <p>cooool</p>
</div>

并做

.col1 {
    float: left;
}

但这只会导致痛苦和痛苦。

我不知道你为什么要这样做;也许你听说“表格错了”，但这是不完整的。整个短语是“表格错误 for layout ”。

将表格用于表格数据，如下所示。

Answer 4

它不是表vs div，它应该是表与语义标记。如果你只是用div替换所有表元素，那么你就错过了整个事情的全部要点。

同样在您的示例中，您将使用表格。

使用div显示网格

4 个答案: