有什么方法可以得到一个只有两个元素的简单的两列布局？答案

【问题标题】：Any way to get a simple two column layout with only two elements?有什么方法可以得到一个只有两个元素的简单的两列布局？
【发布时间】：2014-02-10 15:37:57
【问题描述】：

我的意思是这样的：

definition | content......................
definition | content......................
definition | content......................
definition | content......................

定义列具有固定宽度，内容列填充剩余宽度。

我知道如何用 3 个容器元素来做这个，但是只有两个可以吗？

例如使用这个标记：

<dl>

  <dt> definition </dt>
  <dd> content </dd>

  <dt> definition </dt>
  <dd> content </dd>

  <dt> definition </dt>
  <dd> content </dd>

  ..............
</dl>

我试过了：

dt{
  float:left;
  width: 200px;
}

dd{
  overflow:hidden;
}

但是如果定义列高于内容列，就会弄乱整个布局:(

http://jsfiddle.net/LseGH/

【问题讨论】：

这看起来像是表格数据，为什么不用table标签？
不，它只是表单、标签和输入字段的内容。我不喜欢表格，表格也每行占用 3 个容器元素:(
你能再解释一下吗？您是想用labels 和inputs 或dl 设置form 的样式吗？
两者。 dt 包含标签和其他一些东西，而 dd 包含输入字段或输入字段组
这是一篇有趣的文章，作者处理了同样的问题：stubbornella.org/content/2010/06/25/…

标签： css css-float multiple-columns

【解决方案1】：

您需要浮动dt 和dd 元素，但清除浮动在前一个dd 旁边的dt。我更新为分别添加 30% 和 70% 宽度的列，根据需要进行更改。像这样：

dt {
    clear: both; /* clears the previous floating dd element */
    float: left;
    width:30%;
}

dd {
    margin-left: 0; /* this is important to reset the margin & add the widths to 100% */
    float: left;
    width:70%;
}

Example JS Fiddle Here

【讨论】：

试过了，但是<dd> 没有填满剩余的水平空间 - jsfiddle.net/LseGH/2
已针对固定列宽进行了更新。
在你的例子中你有一个 fixed 宽度，所以如果这和百分比都不是你想要的 - 那还有什么？
我的意思是固定第一列，第二列应该占用所有可用空间:)
它也适用于非百分比宽度......我只是没有足够的信息来说明您想要什么以及您想要什么特定宽度。就像我说的 30% 和 70% 只是上述工作代码的示例。您可以添加任何您想要的宽度 - 从技术上讲，每个宽度为 1,000 像素就可以了，您只会疏远没有至少 2,000 像素宽显示器的用户 - 因此，举个例子，% 效果最好。跨度>

【解决方案2】：

我不得不使用js 来使它工作，因为没有共同的父母，我不知道如何让高度相互竞争。基本上，在页面加载时，检查每个dt 的高度并将其与以下dd 进行比较，然后将它们的高度都设置为更大的值。我更改了一些css 以使其更清晰可见。

jsFiddle

【讨论】：

谢谢，但我不会为此使用 javascript。但是您的回答告诉我，使用 CSS 是不可能的。很奇怪，因为它是如此简单的布局，而 CSS 甚至在 2014 年都无法处理它：）所以我想我不得不为每一行使用一个容器元素......