html - 两个 HTML 元素并排显示但内嵌自动换行

Question

首先，对问题标题感到抱歉，它可能没有很好地描述我的实际需求(这就是为什么我无法通过 Google 搜索找到解决方案的原因之一——我不知道要搜索什么)

我正在尝试在某些“值文本”旁边布置一些“标签文本”，但即使需要跨越多行，也希望使值文本保持一致。

这是期望结果的示例...

Label 1        Value 1
Label 2        Value 2
Label 3        Value 3 is much longer
               so it needs to span multiple lines
               but should be keep in a nice format
Label 4        Value 4

我知道我可以用一张 table 轻松地做到这一点，但我认为 table 在这里不合适。尽管示例数据可能看起来并不相关。真实的标签示例可能是名称、日期、描述和引用编号。

我还想尽可能避免使用任何 float 技术 - 主要是因为我认为使用 float 会要求我指定固定宽度以确保标签和值之间的边距相对较小。

除此之外，我愿意使用所提供的任何元素 - 当然，如果它们被证明是最佳行动方案，我会使用 float /表格。

Here is a starting JSFiddle如果有人想快速玩一下，它就不起作用了。

谢谢

Answer 1

尝试:

HTML

<div class="wrapper">
    <span class="Header">Label 1</span>
    <span class="Text">Value 1</span>
</div>

<div class="wrapper">
    <span class="Header">Label 2</span>
    <span class="Text">Value 2</span>
</div>

<div class="wrapper">
    <span class="Header">Label 3</span>
    <span class="Text">Value 3 is much longer so it needs to span multiple lines but should be keep in a nice format</span>
</div>

<div class="wrapper">
    <span class="Header">Label 4</span>
    <span class="Text">Value 4</span>
</div>

CSS

.wrapper {
  overflow: hidden;
  width: 200px; /* just for demo */
}

.Header
{
    float: left;
    width:100px;
    color: #00F;
    font-weight: bold;
}
.Text
{
    display: block;
    overflow: hidden;
}

演示

http://jsfiddle.net/SGVE5/6/