Mẫu Code CSS đơn giản :
1. Đoạn code CSS chia 2 cột :
<style>
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
</style>

Ứng dụng đoạn code CSS số 1 vào thẻ Div bên dưới : 

<div class="section group">
<div class="col span_1_of_2">
Đây là cột số 1
</div>
<div class="col span_1_of_2">
Đây là cột số 2
</div>
</div>

Sẽ cho ra kết quả như sau : 


Đây là cột số 1
Đây là cột số 2

Post a Comment

Mới hơn Cũ hơn

Xe máy điện Xmen GT Nijia 2018 thể thao năng động (Trắng phối xanh)
Đi tới nơi bán

Xe máy điện Terra Xmen Blade khung thép hợp kim (Xanh lá cây)
Đi tới nơi bán