有什么方法可以使用 DIV 来实现动态内容的 TD 水平对齐？

Question

再次查看我需要重新设计的旧桌面网页之一。

有没有办法使用 div 和现代 CSS 实现同样的灵活性？

我遇到的最基本问题：2 行 2 列的表格。第一列是标签，第二列是文本输入字段。

<table style='width:100%; white-space: nowrap'>
<tr>
    <td style='width:1%'><label>Dynamic Long Text</label></td>
    <td style='width:99%' ><input style='width:100%' type="text"/></td>
</tr>
<tr>
    <td><label>Dyn. Shrt. Text</label></td>
    <td><input style='width:100%' type="text"/></td>
</tr>

标签是从语言词典中插入的，在某些语言中，第一个标签会更宽，在某些第二个标签中。应为文本字段分配最大可能空间，但文本字段应在两侧水平对齐。标签应仅在左侧对齐。

如何使用DIVs 和 CSS 获得相同的效果？

这是我的问题的简化案例，但实际表单中的控件非常混乱，并且不能拆分为多个页面。

在我的旧设计中，第二列通常包含嵌套的单行表而不是单个控件 - 非常混乱的代码，但这都是由同一个问题引起的：

1. 我需要对齐标签。 （通常只需要对齐每行最左边的标签）
2. 标签获取宽度未知的动态内容，具体取决于用户选择的语言。
3. 我需要压缩每个像素以适应表单上的所有控件。

（是的，它的设计很杂乱，但客户坚持在同一屏幕上所有字段都是必需的）

在旧的<table> 版本中，我只依靠tds 来对齐自己，并防止非常冗长的文本资源破坏布局，我在所有内容上都定义了maxwidth。但是在那些maxwidths 下，控件应该利用所有可用空间，输入字段伸展以获得动态标签没有吃掉的每个像素。语言差异也可能非常大 - 一个标签可能会在某些情况下变得更长 40px，而同一行中的另一个标签会变得更短。

编辑：

举个例子说明我遇到的导致嵌套表的问题：

在同一部分的一行中，我需要一个 label/textval 对，然后是一个按钮和另一个 label/textval 对。

然后是只有 4 个标签/文本 val 对的第二行。

然后是第三个有标签的复选框，然后是 4 个复选框，每个复选框都有自己的标签。

然后是一个只有很长字段的标签...

因此，通常每行上的第一个起始标签需要对齐（所以我将它们全部放在第一个表格单元格中，但是每行的其余控件并不统一，并且包含在它们自己的单行中表格。

表单有 20-40 行，具体取决于展开/隐藏的部分 - 因为我们被要求在单个屏幕上显示所有这些（我们甚至不允许垂直滚动。如果用户展开太多要适应的部分，在高度方面，我们必须自动折叠其他部分），我们的设计会议几乎是在计算我们可以在哪里剃掉像素以适应东西。

Answer 1

只要您的表格不太复杂，这应该不会太难实现。

以下是解决您最基本问题的示例：

<div class="table">
<div class="col">
    <div class="row">row 1</div>
    <div class="row">row 1 row 1</div>
</div>
<div class="col">
    <div class="row">
        <input type="text" value="input" />
    </div>
    <div class="row">something</div>
</div>
</div>


.table, .col {
    display: inline-block;
}

小提琴：http://jsfiddle.net/b44wjkj2/1/