If floating elements are different in height, they may be "stuck" by other floating elements when they move down.
Cases:
HTML file:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<title>css left-floating example </title>
<link rel= "stylesheet" style= "Text/css" href= "Test1.css"/>
<body>
<div class= "box" >
<div class= "Div1" >div1</div>
<div class= "Div1" id= "Special" >div2</div>
<div class= "Div1" >div3</div>
<div class= "Div1" >div4</div>
<div class= "Div1" >div5</div>
<div class= "Div1" >div6</div>
</div>
</body>
CSS file:
. box{
width:600px;
height:400px;
border:1px solid Gray;
}
. div1{
width:100px;
height:100px;
BORDER:1PX solid blue;
margin-top:5px;
Background-color:pink;
Float:left; /* Left FLOAT * *
margin-right:5px;
}
#special {
height:110px;
}The effect of the following figure:
This article address: http://www.bianceng.cn/web/Css/201608/50307.htm
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
