Faux Column : là một kỹ thuật dùng để làm cho các thẻ div có chiều cao bằng nhau. (giống như khi ta dùng thẻ ‘td’ trong table)
Sau đây là ví dụ :
Chúng ta sẽ tạo ra 3 cột bằng cách dùng 5 thẻ div lồng nhau (main-content, main-content_1, main-content_2, main-content_3, main-content_4) và 3 thẻ div (content-center, content-left, content-right), 3 thẻ div này là phần nội dung sẽ được hiển thị. Ta sẽ quy định phần bên trái và bên phải sẽ có chiều rộng là 25%, còn phần giữa sẽ là 50%.)
HTML :
CSS :
.clear {
clear: both;
}
div#main-content {
background: #a8a8a8;
width: 960px;
margin: 0 auto;
}
div#main-content_1 {
background: #4200ff;
}
div#main-content_3 {
background: #ff0c00;
}
Đặt các thẻ div vào vị trí mình mong muốn bằng cách sử dụng thuộc tính position: relative
div#main-content {
background: #a8a8a8;
width: 960px;
margin: 0 auto;
position: relative;
}
div#main-content_1,
div#main-content_2,
div#main-content_3,
div#main-content_4 {
position: relative;
width: 100%;
}
Đầu tiên chúng ta sẽ cho thẻ div : main-content_1 dịch sang bên trái là 75%
div#main-content_1 {
background: #4200ff;
right: 75%;
}
Tiếp đến là cho thẻ div : main-content_2 dịch sang bên phải là 75% để trở về vị trí ban đầu
div#main-content_2 {
left: 75%;
}
Làm tương tự như vậy với thẻ div : main-content_3 và main-content_4 nhưng với vị trí lần lượt là phải và trái
div#main-content_3 {
background: #ff0c00;
left: 75%
}
div#main-content_4 {
right: 75%
}
Dùng thuộc tính overflow: hidden để ẩn đi phần thừa
div#main-content {
background: #a8a8a8;
width: 960px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
Vậy là xong được 1 phần. Bây giờ sẽ là phần nội dung hiển thị. Ở phần này, mình sẽ sử dụng column : 2-1-3. Việc này khá tốt để làm SEO. Chúng ta sẽ đặt phần nội dung chính lên đầu tiên rồi tiếp đến là phần nội dung phụ.
div#content-center,
div#content-left,
div#content-right {
position: relative;
}
div#content-center {
float: left;
left: 25%;
width: 50%;
}
div#content-left {
float: left;
left: -50%;
width: 25%;
}
div#content-right {
float: right;
width: 25%;
}
Thêm 1 chút nội dung vào. Đây là kết quả
(i-php.net)
