tin tức

Faux Colums & Column 2-1-3

22/02/2012 - Xem: 867

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)

Liên kết

Tin được quan tâm nhất

Quản cáo