2

如果有更好的设计方法，或者我可以用谷歌搜索的容易搜索的短语，请随时告诉我，我会很快把它记下来。不幸的是，我不认为我在谷歌上搜索正确的条款。

要跳过解释，底部有一个指向小提琴的链接。

我有一个必须始终靠在右侧的右侧柱子，并且永远不会向下推。

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

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

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%;
}​

条件

  • 右列必须始终向右对齐
  • 右列必须是可变宽度
  • 左元素必须是可变宽度
  • 左元素不应该干扰右列

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

也许这里适合一张桌子？

4

1 回答 1

1

我相信，如果您将右列放在 html 中的左列上方，它会做您想要的。

于 2012-04-20T21:21:55.333 回答