Question

如果有更好的设计方法，或者我可以谷歌轻松搜索的短语，请随时告诉我，我会很快将其删除。不幸的是，我认为我没有用Google搜索合适的条款。

要跳过解释，可以在底部找到小提琴的链接。

我有一个正确的列，必须始终在右侧，而不是向下推。

我的左侧元素应该是内联的，直到它们与右列碰撞，然后它们应该清除到下一行。

我认为这可以通过将左侧元素浮动到左侧来完成，而右侧列则浮动到右侧。我无法清除任何单个左侧元素，因为每个左侧元素的宽度可变。

HTML

<div class='left-el'>
    <ul>
        <li>Variable width</li>
        <li>Variable height</li>
        <li>Left margin must always be against left-side</li>
    </ul>
</div>
<div class='left-el'>
    This column needs to move to the next<br/> 
    line since there is no room left. <br/>
    Instead, it pushes the right-floated div down<br/> 
    to make room.
</div>
<div id='right-col'>
    <ul>
        <li>Variable width</li>
        <li>100% height</li>
        <li>Right margin must always be against right-side</li>
    </ul>
</div>

CSS

.left-el {
    background-color: orange;            
    float: left; 
    margin-right: 10px;
}

#right-col {
    background-color: green;
    float: right; 
    height: 100%;
}

条件

右侧col必须始终与右侧对齐
右侧col必须可变宽度
左侧元素必须为可变宽度
左边的元素不应该干扰右边的

这就是我一直在使用的：http://jsfiddle.net/TmSuD/（来自上面的标记）

这里的表格也许合适吗？

Answer 1

我相信如果你把右栏放在html的左栏上面，它会做你想做的。

如何在与右浮动元素碰撞时清除左浮动元素？

1 个答案: