html - 当我有多行并且想要左列右对齐和右列左对齐时，如何解决没有表格的表格对齐问题

Question

我正在为以下方面寻找解决方案:我有一个包含两列 (cols) 的表。左列包含表单标签，右列包含输入。为了有好的UI体验，我想把这些列并排对齐(left col align right | right col align left)。现在我尝试在没有表格的情况下解决这个问题，因为表格不是表格数据。表格的一大优势是:

1. table-cols 自动占用它们需要的空间，因此左列自动与最宽的标签一样宽
2. 在多行中我没有丢行的问题

下图显示了我的问题: http://i.stack.imgur.com/75Ehm.png

那么有没有满足以下条件的解决方案呢？:

• 没有Javascript
• left col/div 占用最大值。最宽标签的宽度
• 没有图片中的行冲突

Answer 1

也许你可以考虑使用bootstrap，因为它

• 可定制(使用网站上的构建器设置颜色、字体等，然后点击生成
• 易于实现(导入 css 文件)
• 易于使用(网站上有数以千计的示例)
• 网格系统可以在不实际使用表格标签的情况下构建表格，甚至可以对平板电脑和智能手机等较小的浏览器屏幕作出 react 。

网址:http://getbootstrap.com/

表格可能看起来像这样(请注意，您在 bootstraps 网格系统中有 12 个列，您可以使用 div 类 col-md-1 到 col-md-12 自由选择宽度。您可以添加任意数量的列就像，重要的是你确实需要超过 12 列的范围，否则它会响应地破坏你的 div 并在下一行显示内容，但我认为你不需要超过 12 列来构建你的表单所以这应该是完美的.

首先，它很容易实现:

<link rel="stylesheet" type="text/css" media="screen" href="/path/to/your/css/bootstrap.min.css" />

与您的表格匹配的示例是:

<div class="row text-right">
    <div class="col-md-4">Label 1</div>
    <div class="col-md-4">Label 2</div>
    <div class="col-md-4">Label 3</div>
</div>
<div class="row text-left">
    <div class="col-md-8"><input type="text" name="t1" value="" /></div>
    <div class="col-md-8"><input type="text" name="t2" value="" /></div>
    <div class="col-md-8"><textarea name="t3" placeholder="Enter some text..."></textarea></div>
</div>

再举一个例子，假设您触发了一个数据库查询，并且行保存在 $data 中，您可以实现一个如此简单的表:

<div class="row">
    <div class="col-md-2">ID</div>
    <div class="col-md-4">Name</div>
    <div class="col-md-6">Description</div>
</div>
<?php foreach($data as $row) { ?>
    <div class="row">
        <div class="col-md-2">$row["id"]</div>
        <div class="col-md-4">$row["name"]div>
        <div class="col-md-6">$row["description"]</div>
    </div>
<?php } ?>

另一个注意事项:

如果您只设置 col-md-x 框大小，则 Bootstrap 会自动猜测其他屏幕分辨率。如果您想更具体地定义它，您可以使用类 col-lg-x、col-sm-x 和 col-xs-x 类来针对较小的屏幕(例如 table 和智能手机)使用特定设置。