当前位置: 动力学知识库 > 问答 > 编程问答 >

CSS float weird behavior

问题描述:

I have this weird behavior with float positioned elements. The parent element is 100% width, and 450px height. Child floated elements have percentage width and high. When I change the width of the window, some child element have minor changes in height.

You can test it in this fiddle : http://jsfiddle.net/matthieubrunet/jsfww2e6/1/

Try to reduce the window, and you will see the purple div act weird... In my case (Safari and Chrome), it start changing height, and then jump to the right. I suppose it's because the yellow box became slightly smaller, but why ?

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

}

Thank you very much

网友答案:

add clear: left; to .metro .bottomleft

//correct fiddle

http://jsfiddle.net/Lvk3k6gn/

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: