Place three div on the page, the background is pink, width 150px, height 100px, blue, solid line. Three Div are left floating, to achieve horizontal arrangement.
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" >div2</div>
<div class= "Div1" >div3</div>
</div>
</body>
TEST1.CSS file:
. box{
width:600px;
height:400px;
border:1px solid Gray;
}
. div1{
width:150px;
height:100px;
BORDER:1PX solid blue;
margin-top:5px;
Background-color:pink;
Float:left; /* Left FLOAT * *
margin-right:5px;
}If the div box is large and the outside box cannot accommodate the floating div element that is horizontally arranged, the other floating blocks move down until there is enough space for the line to wrap.
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" >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:120px;
height:100px;
BORDER:1PX solid blue;
margin-top:5px;
Background-color:pink;
Float:left; /* Left FLOAT * *
margin-right:5px;
}The effect of the following figure:
This article address: http://www.bianceng.cn/web/Css/201608/50301.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
