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