一尘不染

IE7中奇怪的浮动行为

css

我想用标题栏创建一个简单的框,其中包含标题和一些工具按钮。我有以下标记:

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

这个可以解决吗?


阅读 182

收藏
2020-05-16

共1个答案

一尘不染

在最外面的div中指定宽度。如果内容div中的宽度表示此框的总宽度,则只需将其添加到最外面的div中,然后(可选)将其从内容中删除,如下所示:

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>
2020-05-16