mang hầu hết mọi người hỏi tôi về mẹo 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 sở hữu chiều cao bằng chiều cao của cột nhiều nội dung nhất. Để rõ hơn tất cả mọi người vui lòng xem Demo Giao diện Div 3 cột.
các bạn sẽ nhận thấy cột 2 (ở giữa) mang chiều cao lớn nhất, chiều cao 2 cột còn lại thì nhỏ hơn. Vậy mang mẹo 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 vài cần theo kiểu này, nhưng đôi khi người mua của mọi người bắt buộc điều đó?
bí quyết 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 không 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 mọi tránh và khó sử dụng, nguyên do là khách hàng yêu cầu căn chỉnh và tính toán kích thước ảnh nền sao cho tối ưu. Hơn nữa khách hàng sẽ gặp cạnh tranh khi bo góc cho những cột.
Hôm nay tôi sẽ hướng dẫn quý khách một phương pháp đó là tiêu dùng jQuery, cách này cũng hơ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 đề cập đến code HTML + CSS như thế nào để tạo bắt buộc giao diện div 3 cột như demo khách hàng thấy trên. người dùng mang thể Bật mí vấn đề này trong bài viết thiết kế web giao diện có Div và CSS
Trong demo trên tôi sở hữu 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>
cách giải quyết vấn đề của chúng ta như sau:
một. tiêu 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 với chiều cao to nhất (max_height)
3. tiêu 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