如何对齐DIV布局中的行？

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

<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，但它没有按我的预期工作。

来源

2011-11-24 Ivan

我同意帕维尔。我仍然更喜欢摆脱非表格数据的表格（这是一个很细的表格数据，什么不是，但我不会亲自考虑这个，我想这取决于你有多少内容）。

我会使用列表。 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次四次，这意味着我们将在每一行中有四个列表项。

试试看吧，然后回来，如果你有你将不得不使用集装箱作为行任何具体问题:)

来源

2011-11-24 10:59:01 Yisela

这是可能的一个例子..我不是很好的HTML和CSS :) – Ivan

是的，我会编辑我的答案，所以你知道从哪里开始 – Yisela

@Ivan完成。练习使用此代码来了解列表的工作方式。另外，为了将来的参考，请查看关于使用菜单列表的文档，它将为您节省大量时间用于下一个项目:)欢迎来到真棒世界的非表！ – Yisela

不要让事情变得如此复杂。如果你希望你的数据有一张表格，那么为什么摆脱表格？设计整个页面时，表格布局很糟糕。但是如果你需要它的功能，再次考虑你的决定。如上所述，如果你想水平排列一些元素，那么为什么把它们放在单独的div中呢？把它们放在一个div中，去掉div上的“float”风格，这样它们就会相互叠加。

来源

2011-11-24 10:41:36

嗯，这是一个页面功能，它是，所有页面都有这个布局，所以我认为使用表格很糟糕。当我把相同的DIV放在一起，然后列错位：:(你可以修改jsfiddle来告诉我怎么做吗？谢谢 – Ivan

@Ivan如果你有元素应该同时水平和垂直对齐，那么我认为尝试一些不自然的风格和布局调整，仅仅为了删除表是比仅仅使用表更加恶毒。所以对不起，我真的不知道用div来实现你的想法的好方法。 –

，而不是collumns。

来源

2011-11-24 11:27:11 ANeves

如何对齐DIV布局中的行？

回答

相关问题