Question

当我输入这个html时，在Dreamweaver中：

<div style="float:left;width:100px;height:20px">a</div>
<div style="float:left;clear:left;width:100px;height:100px">b</div>
<div style="float:left;width:80px;height:100px">c</div>

div c似乎与div a顶部的顶部对齐。这就是我想要的显示，但是当在浏览器中渲染（firefox，即测试）时，div c低于div a并且与div b对齐。我该如何解决这个问题？

Answer 1

这似乎是Dreamweaver中的一个错误。

元素不会在同一个上下文中浮动过清除元素。

这听起来像你想要的：

<div style="width: 100px; float: left;">
    <div style="height:20px">a</div>
    <div style="height:100px">b</div>
</div>
<div style="float: left;width:80px;height:100px">c</div>

Answer 2

很难从描述中猜出您想要的布局：

试试这个让我知道......

<div style="float:left;width:100px;height:20px">a</div>   
<div style="float:left;width:80px;height:100px">c</div>
<div style="clear:both;width:100px;height:100px">b</div>

奇怪的CSS问题？使用float属性定位div元素

2 个答案: