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