có đầy đủ bạn hỏi tôi về phương pháp thiết kế 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 nhiều nội dung nhất. Để rõ hơn bạn vui lòng xem Demo Giao diện Div 3 cột.
tất cả mọi người sẽ nhận thấy cột 2 (ở giữa) có chiều cao to nhất, chiều cao 2 cột còn lại thì nhỏ hơn. Vậy sở hữu 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ố cần theo kiểu này, nhưng đôi lúc các bạn của khách hàng buộc phải điều đó?
cách thực hiện
Trước đây với một cách được đưa ra là Faux Columns (cột giả). mẹo này tiêu dùng 1 file hình xây dựng nền để tạo thành cột fake. Thực tế thì cột này ko tồn tại. Bật mí về Faux Columns tại đây: http://www.alistapart.com/articles/fauxcolumns/
Nhưng phương pháp này theo PT thấy hầu hết tránh và khó dùng, lý do là bạn buộc phải căn chỉnh và tính toán kích thước ảnh nền sao cho thông minh. Hơn nữa quý khách sẽ gặp khó khăn lúc bo góc cho một số cột.
Hôm nay tôi sẽ hướng dẫn khách hàng 1 mẹo đó là dùng jQuery, phương pháp này cũng hơi đơn thuần và lại khắc phục được nhược điểm của cách trên.
Mình sẽ ko kể đến code HTML + CSS như thế nào để tạo buộc phải giao diện div 3 cột như demo quý khách thấy trên. khách hàng mang thể Giới thiệu vấn đề này trong bài viết xây dựng web giao diện mang Div và CSS
Trong demo trên tôi có 3 thẻ div tương ứng mang 3 cột như sau:
1
<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:
1. sử dụng phương pháp .height() trong jQuery để lấy kích thước của 3 cột
2. Từ 3 kích thước trên ta tìm được cột mang chiều cao lớn nhất (max_height)
3. sử dụng bí quyết .height(max_height) để gán độ cao cho 3 cột theo kích thước của cột to 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 lớn 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