Question

我正在设计一系列表单行。每个div 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 here：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;，在标签上放置position:absolute;只是为了将其从文档流中取出，然后在内容上放置margin-left:150px（或者广泛应该放在定）。

如果Label有可能比Content更高，那就不太好了。

Answer 2

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

.Row
{
    ...
    position: relative;
}

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

jsfiddle

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

2 个答案: