Question

我正试图摆脱旧项目中的表格，但我发现了一个我不知道如何解决的问题。如果我有一个像this这样的表：

<table>
    <tr>
        <td>First Row</td>
        <td>Second Row</td>
        <td>Third Row</td>
    </tr>
    <tr>
        <td>
            Some content here
        </td>
        <td>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.
        </td>
        <td>
            Problem comes when columns have different content height
        </td>
    </tr>
    <tr>
        <td>This is aligned!</td>
        <td>With this</td>
        <td>And this!!</td>
    </tr>
</table>

每列中最新的行对齐。如何在DIV布局设计中执行此操作？我的尝试是this，但它没有按照我的预期发挥作用。

Answer 1

不要让事情变得那么复杂。如果您希望您的数据具有表格外观，那么为什么要摆脱表格？在设计整个页面时，表格布局很糟糕。但如果您需要它的功能，请再次考虑您的决定。

话虽如此，如果你想水平对齐一些元素，那么为什么要把它们放在不同的div中呢？把它们放在一个div中，然后在div上删除“float”样式，这样它们就会互相攻击。

Answer 2

我同意帕维尔的观点。我仍然更喜欢摆脱非表格数据的表格（这是一个细线表格数据和什么不是，但我个人认为不是这样......我想这取决于你有多少内容）。

我会使用列表。 Div也很好，但是列表更容易设计（你没必要给它们上课）。另外，如果你从表格切换到div，那么抓住列表是一件非常好的事情，你会经常使用它们。只是一个不同的选择。

编辑：这里有关于使用列表表格数据的更多信息。资料来源：http://mirificampress.com/permalink/the_amazing_li

li

的多列列表

使用li快速轻松地构建包含多列的列表。当数据实际上是表格式的（需要列标题，列和行）时，您应该使用table。但是当你只是想让列表看起来更加容易阅读时，你应该使用这种方法。就像任何其他li组一样，多列列表可以生成简单的HTML代码并轻松重新排列列表项。这是它的工作原理。

HTML：

<div id="list_wrapper">
    <ul class="multiple_columns">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
    </ul>
</div>

CSS：

ul{
    margin: 0 auto;
    padding: 0;
}

/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
    width: 200px
}

/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
        float: left;
        list-style: none;
        height: 30px;
        width: 50px;
    }

列表项只是水平堆叠，直到它们填充包含的包装器的宽度。在这种情况下，我们有一个200px宽的包装器，每个列表项设置为50px宽。由于50次进入200次，这意味着我们每行将有四个列表项。

尝试一下，如果您有任何具体问题，请回来：）

Answer 3

您必须将容器用作行，而不是作为collumns。

如何对齐DIV布局中的行？

3 个答案: