如何以类似网格的方式定位内容

Question

我有一堆Web应用程序的控件，看起来像这样

--------------------------------------------------------------------------
Banana:       | Number of slices: [dropdown] | Slice thickness: [dropdown]
--------------------------------------------------------------------------
Cucumber:     | Number of slices: [dropdown] | Slice thickness: [dropdown]
--------------------------------------------------------------------------

我想把它们放在一个网格状的布局中，我有一种感觉 tables 不是那种方式（即使它们对我的情况也是完美的）。我很难确定如何对齐列，使它们在位置和长度上匹配（那些管道（|）实际上不可见，但如果它们是我希望它们完全对齐（当然一切在＆＃34;细胞＆＃34;具有不同的长度））。

Answer 1

这里有你的表格输入。表格的每一行都是一种成分，每列确实是一列（首先是标签列，然后是切片的列，然后是厚度）。你绝对应使用<table>。

但是，我建议布局中的这个小变化：

Ingredient |   Slices   | Thickness
------------------------------------
Banana     | [dropdown] | [dropdown]
------------------------------------
Cucumber   | [dropdown] | [dropdown]

只是让它更像桌子;）

Answer 2

我同意桌子是一个很好的方法。但是，如果您不想使用它们，您可以执行以下操作：

<div id="row">
    <div style="width:10%;left:0">fruit name</div>
    <div style="width:15%;left:10%">slices</div>
    ...
</div>

您需要在行和行中的子项之间进行相对/绝对定位。我想你会把它全部包裹在一个外行div中，以确保高度排列。