02:19
Vân Anh
với tất cả các bạn hỏi tôi về cách xây dựng Giao diện Div với 3 cột bằng nhau, tức là 2 cột còn lại luôn với chiều cao bằng chiều cao của cột phổ biến nội dung nhất. Để rõ hơn người dùng vui lòng xem Demo Giao diện Div 3 cột.
mọi người sẽ nhận thấy cột 2 (ở giữa) có chiều cao lớn nhất, chiều cao 2 cột còn lại thì nhỏ hơn. Vậy với phương pháp nào để 3 cột luôn bằng nhau dù nội dung của trang web thế nào? Trong thực tế ít lúc nào chúng ta gặp một số đề nghị theo kiểu này, nhưng đôi khi bạn của tất cả mọi người phải điều đó?
bí quyết thực hiện
Trước đây sở hữu một mẹo được đưa ra là Faux Columns (cột giả). cách này dùng 1 file hình xây dựng nền để tạo thành cột giả. Thực tế thì cột này ko tồn tại. Xem qua về Faux Columns tại đây: http://www.alistapart.com/articles/fauxcolumns/
Nhưng phương pháp này theo PT thấy phần lớn giảm thiểu và khó tiêu dùng, bởi vì các bạn nên căn chỉnh và tính toán kích thước ảnh nền sao cho logic. Hơn nữa mọi người sẽ gặp khó khăn lúc bo góc cho những cột.
Hôm nay tôi sẽ hướng dẫn bạn một cách ấy là dùng jQuery, phương pháp này cũng khá đơn thuần và lại khắc phục được nhược điểm của phương pháp trên.
Mình sẽ không nói tới code HTML + CSS như thế nào để tạo phải giao diện div 3 cột như demo các bạn thấy trên. bạn mang thể Giới thiệu vấn đề này trong bài viết thiết kế web giao diện với Div và CSS
Trong demo trên tôi sở hữu 3 thẻ div tương ứng với 3 cột như sau:
một
<div id="left">Cột trái</div>
2
<div id="center">Cột giữa</div>
3
<div id="right">Cột phải</div>
phương pháp giải quyết vấn đề của chúng ta như sau:
một. sử dụng cách .height() trong jQuery để lấy kích thước của 3 cột
2. Từ 3 kích thước trên ta chọn được cột mang chiều cao lớn nhất (max_height)
3. dùng mẹo .height(max_height) để gán độ cao cho 3 cột theo kích thước của cột lớn nhất
Trong thẻ <head> của trang website chúng ta viết code jQuery như sau
01
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
02
<script type="text/javascript">
03
$(document).ready(function()
04
var max_height = 0;
05
//Duyệt qua 3 cột để lấy kích thước của cột to nhất
06
$("#left,#center,#right").each(function()
07
if($(this).height() > max_height)
08
max_height = $(this).height();
09
);
10
//Gán độ cao 3 cột theo giá trị max_height
11
$("#left,#center,#right").height(max_height);
12
);
13
</script>
0 nhận xét:
Đăng nhận xét