Question

我对浮动定位元素有这种奇怪的行为。父元素的宽度为100％，高度为450像素。儿童浮动元素具有百分比宽度和高。当我改变窗口的宽度时，一些子元素的高度会有微小的变化。

您可以在这个小提琴中进行测试：http://jsfiddle.net/matthieubrunet/jsfww2e6/1/

尝试减少窗口，你会看到紫色的div很奇怪......在我的情况下（Safari和Chrome），它开始改变高度，然后跳到右边。我想这是因为黄色的盒子变小了，但为什么呢？

HTML

<div class="metro">
    <div class="topleft">a</div>
    <div class="topright">b</div>
    <div class="middle">c</div>
    <div class="bottomleft">d</div>
</div>

CSS

    .metro {
    height: 550px;
}
.metro div {
    float: left;
}
.metro .topleft {
    background: red;
    width: 33%;
    height: 67%;
    margin-right: 1%;
}
.metro .topright {
    background: green;
    width: 66%;
    height: 33%;
    margin-bottom: 1%;
}
.metro .middle {
    width: 32%;
    height: 33%;
    background: yellow;
}
.metro .bottomright {
    background: blue;
    width: 33%;
    height: 67%;
    margin-left: 1%;
    top:  -32.5%;
    position: relative;
}
.metro .bottomleft {
    background: purple;
    width: 66%;
    height: 33%;
    margin-top: 1%;
}

非常感谢

Answer 1

将clear: left;添加到.metro .bottomleft

//纠正小提琴

http://jsfiddle.net/Lvk3k6gn/

http://www.w3schools.com/cssref/pr_class_clear.asp

CSS漂浮怪异的行为

1 个答案: