, . .
- left - . , .
- right - . , .
- none - ( ).
, , , 200 .
html :
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3"> </div>
CSS :
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
}
, , .
float , , .. :
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
, :
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
.box3 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:right;
}
- . .
CSS :
.column1 {
float:left;
width: 33%;
}
.column2 {
float:left;
width: 33%;
}
.column3 {
float:left;
width: 33%;
}
html- , DIV
<div class="column1">
<p>There is one universal truth in website making: To make a websitet...</p>
</div>
<div class="column2">
<p> If you're like the vast majority of people thinking...</p>
</div>
<div class="column3">
<p>There is one universal truth in website...</p>
</div>
, CLEAR - , .
- left - .
- right - .
- both - .
- none - .
(float:left;), .
|
|
, CLEAR:BOTH .. , .
html-
<div class="box1"> </div>
<div class="box2"> </div>
<div class="box3">
<p>There is one universal truth in website...</p>
</div>
CSS-
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box3 {
clear:both;
}
, (, , .)
, , .
html-
<div class="box1"> </div>
<div class="box2"> </div>
<p>There is one universal truth in website...</p>
css-
.box1 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
}
.box2 {
width:200px;
height:200px;
border:1px solid red;
background-color:orange;
float:left;
clear:both;
}
. , .