Hỗ trợ kỹ thuật:
 support@xpt.vn
 08.3592.1630

Tư vấn khách hàng
 contact@xpt.vn
 08.3592.1630–0906.305.305

Than phiền:
phu.nguyen@xpt.vn


Hỗ trợ trực tuyến


 

DANH BẠ WEBSITE
PHẦN MỀM HỮU ÍCH
FORUM HỌC THIẾT KẾ WEB
Trực tuyến:    8
Hôm nay:    501
Khách viếng thăm:    12576032
Bảo hành vĩnh viễn!
Chế độ bảo hành không giới hạn thời gian cho tất cả các website được thiết kế & lưu trữ trên máy chủ của XPT
Thiết kế ấn tượng, độc đáo!
Website quí khách sẽ được thiết kế ấn tượng, nổi bật theo yêu cầu của từng khách hàng!
Không sử dụng mã nguồn mở!
Website của quí khách sẽ được vận hành trên nền hệ quản trị nội dung cao cấp do chính đội ngũ XPT thiết kế & phát triển, mà không sử dụng các hệ quản trị nội dung miễn phí có sẵn (free open source)
Dịch vụ chuyên nghiệp
Với phong cách phục vụ Khách hàng chuyên nghiệp, tận tình.Đội ngũ HIGHLAND SOFT sẽ mang đến cho Quý khách hàng sự hài lòng về Web site của mình khi chọn HIGHLAND SOFT là nhà thiết kế.
Kiến thức về thiết kế web Danh mục tin tức
Giao diện Div 3 cột bằng nhau
 Có rất nhiều bạn hỏi tôi về cách thiết kế Giao diện Div có 3 cột bằng nhau, tức là 2 cột còn lại luôn có chiều cao bằng chiều cao của cột nhiều nội dung nhất.

Có rất nhiều bạn hỏi tôi về cách thiết kế Giao diện Div có 3 cột bằng nhau, tức là 2 cột còn lại luôn có 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

Bạn 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 có cách 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 khi nào chúng ta gặp những yêu cầu theo kiểu này, nhưng đôi khi khách hàng của bạn yêu cầu điều đó?

Phương pháp thực hiện

Trước đây có một phương pháp được đưa ra là Faux Columns (cột giả). Phương pháp này sử dụng một file hình làm nền để tạo thành cột giả. Thực tế thì cột này không tồn tại. Tìm hiểu về Faux Columns tại đây: http://www.alistapart.com/articles/fauxcolumns/

Nhưng cách này theo PT thấy rất nhiều hạn chế và khó sử dụng, vì bạn phải căn chỉnh và tính toán kích thước ảnh nền sao cho hợp lý. Hơn nữa bạn sẽ gặp khó khăn khi bo góc cho các cột.

Hôm nay tôi sẽ hướng dẫn bạn một phương pháp đó là sử dụng jQuery, phương pháp này cũng khá đơn giả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 đề cập đến code HTML + CSS như thế nào để tạo nên giao diện div 3 cột như demo bạn thấy trên. Bạn có thể tìm hiể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 có 3 thẻ div tương ứng với 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:

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 có chiều cao lớn nhất (max_height)

3.     Sử 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 web 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>

 Tham khảo thêm => Lợi ích của việc thiết kế website, Bảo mật từ đầu cho ứng dụng web, Mẹo trong thiết kế web

Tag: Tin thương mại điện tử, thiết kế website, kiến thức về thiết kế web, thiết kế web theo lĩnh vực, thiết kế website bán hàng mạng đa cấp MLM

Highlandsoft.com.vn _nguồn sưu tầm

( 5367 lượt xem )
Chia sẻ với Bạn bè
 
Tin mới nhất

Home  |  Web Design  |  Domain  |  Hosting  |  Customers  |  Forum  |  FAQs  |  Contact Us 
HIGHLAND SOFT Co.,Ltd ( CÔNG TY PHẦN MỀM CAO NGUYÊN)
441/92A Điện Biên Phủ, Phường 25, Bình Thạnh, TP.HCM
Tel: 08.3512.8729 - 08.3512.8729 - Fax: 08.5.2587.595 Hotline: 0906.305.305
Email: contact@xpt.vn - sales@xpt.vn Support Email: support@xpt.vn
Thiết kế web | Thiết kế web theo lĩnh vực | Phần mềm quản lý kho | Phần mềm quản lý bán xe máy | Thiet ke website ban hang da cap mlm | Xe đạp thể thao | Xe đạp địa hình | Mua ban Xe dap truc tuyen | Kênh Video xe đạp thể thao | Xe đạp thể thao Giant | Xe đạp thể thao trinx | Xe đạp thể thao jett | Xe đạp thể thao cannondale | Xe đạp trek | Xe đạp gấp xếp | Xe đạp bmx | Xe đạp nhập khẩu | Xe đạp thời trang | Xe đạp thông dụng | Xe đạp trẻ em, cho bé | phụ kiện xe đạp | Cho thuê xe đạp
thiet ke web - thiet ke website thiet ke web thiet ke website Cac goi thiet ke website Danh ba website thiet ke website mien phi thuong mai dien tu cong ty thiet ke web thiet ke website ban hang hoc thiet ke website mien phi phan mem thiet ke web mien phi