Question

我正在创建一个HTML网页，它包含三个垂直列。列包含不同的内容 - 包括表单元素（选择等）。

但是，我希望文本行在所有三列中“排列”（不确定我是否在这里使用了正确的术语）。

目前，第1,2和3列中的文本（使用第1列文本作为参考）不是“排列” - 也就是说如果要绘制虚拟水平线三列，第1列上的文本将在该行上（因为它是参考列），第2列和第3列中的文本不在同一水平线上。

我是否可以使用CSS规则来确保所有列中的文本“排列” - 即使某些列可能包含表单控件，图像等？

Answer 1

将它们排成一行是正常的，它们之间可能有标题和其他内容，但无论如何，如果你想平等地排序，你可以line-height:25px; / 或任何你想要的东西 /，如果你在这里或在jsfiddle.net上粘贴一些代码会更容易

Answer 2

一个简单的解决方案是将列拆分为水平。所以，而不是：

<div class="col1">forms, images + text</div>
<div class="col2">forms, images + text</div>
<div class="col3">forms, images + text</div>

您可以拥有以下内容：

<div class="top-col1">forms, images</div>
<div class="top-col2">forms, images</div>
<div class="top-col3">forms, images</div>
// I assume the columns are floated so you'll probably have
// something like <br class="clear"/> here
<div class="bottom-col1">text</div>
<div class="bottom-col2">text</div>
<div class="bottom-col3">text</div>

CSS：如何在不同的列中“排列”行？

2 个答案: