如何在不使用固定宽度的情况下保持浮动元素向下翻转？

Question

我正在设计一系列表单行。每个行 div 都有一个固定宽度的标签 div 和一个可以包含任意数量的 float: left 元素的内容 div。

示例标记是：

<div class="Row">        
    <div class="Label">Label Here</div>        
    <div class="Content">            
        <div class="Item">Short Content</div>        
    </div>        
</div>    
<div class="Row">        
    <div class="Label">Label Here</div>        
    <div class="Content">            
        <div class="Item">
            Long Content ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id eros magna. Suspendisse eu diam nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu neque massa.
        </div>                
    </div>        
</div>

到目前为止的CSS是：

.Row {
    clear: left;
    padding: 10px;
}

.Label {
    float: left;
    width: 150px;
}

.Content {
    float: left;
}

.Content .Item {
    float: left;
}

jsfiddle 在这里：http://jsfiddle.net/vVy5J/2/

只要内容 div 的内容不大于行中的剩余宽度，这看起来是正确的。如果是，则内容 div 会“翻转”到标签下方并紧贴行 div 的左边缘：http://screencast.com/t/Iknv98R9

我需要长内容 div 来换行，但仍靠在行的顶部并与标签的右边缘齐平。

传统的解决方案是给内容 div 一个固定的宽度。但这不会飞到这里，因为行宽会根据浏览器窗口大小等而变化，并且内容 div 需要从标签 div 的右边缘延伸到包含行 div 的右边缘。

要求：我只能在行 div 内更改标记。内容必须是元素，所以 text-indent 对我不起作用。我需要支持IE7+

Answer 1

您可以将 position:relative; 放在 Row 上，将 position:absolute; 放在 Label 上，以便将其从文档流中取出，然后将 margin-left:150px 放在 Content 上（或者它应该有多宽）。

如果标签有可能高于内容，那就不好了。

Answer 2

您可以使用简单的定位技巧。 #row 必须是相对的，内容是绝对的，left: 150px。

.Row
{
    ...
    position: relative;
}

.Content
{
    ...
    position: absolute;
    left: 150px;
}

jsfiddle