Phương pháp thiết kế giao diện Div 3 cột bằng nhau

Thảo luận trong 'Các rao vặt khác' bắt đầu bởi Angle123, 23 Tháng sáu 2016.

  1. Angle123

    Angle123 Member Thành viên

    Bài viết:
    49
    Đã được thích:
    0
    Diendanraovataz.net - Diễn đàn rao vặt - Đăng tin mua bán - Quảng cáo miễn phí - Hiệu quả - sở hữu đông đảo các bạn hỏi tôi về mẹo làm 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 đa dạng nội dung nhất. Để rõ hơn người dùng vui lòng xem Demo Giao diện Div 3 cột.

    [​IMG]

    tất cả mọi người sẽ nhận thấy Thiết kế website thời trang cột 2 (ở giữa) mang chiều cao to nhất, chiều cao 2 cột còn lại thì nhỏ hơn. Vậy có mẹo 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 vài cần theo kiểu này, nhưng đôi khi các bạn của tất cả mọi người 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ả). cách này dùng một file hình thiết kế nền để tạo thành cột nhái. Thực tế thì cột này không tồn tại. Xem qua về Faux Columns

    Nhưng cách này theo PT thấy gần như hạn chế và khó sử dụng, bởi vì bạn nên 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 bạn sẽ gặp cạnh tranh khi bo góc cho một số cột.

    Hôm nay tôi sẽ hướng dẫn người dùng một cách đó là sử dụng jQuery, phương pháp 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ẽ ko nhắc đến code HTML + CSS như thế nào để tạo yêu cầu giao diện div 3 cột như demo bạn thấy trên. người dùng có thể Giới thiệu vấn đề này trong bài viết làm website giao diện với Div và CSS

    Trong demo trên tôi mang 3 thẻ div tương ứng sở hữu 3 cột như sau:

    một



    Cột trái


    2



    Cột giữa


    3



    Cột phải


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

    3. sử dụng mẹo .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ẻ

    của trang website chúng ta viết code jQuery như sau

    01



    02
     
    Cùng đọc NỘI QUY DIỄN ĐÀN và ý thức thực hiện cùng BQT xây dựng cộng đồng thêm vững mạnh bạn nhé
    ***** Xin đừng Spam vì một diễn đàn trong sạch *****
  2. loekage

    loekage Member Thành viên Bị Cảnh Cáo

    Bài viết:
    26
    Đã được thích:
    0
    Cảm ơn bạn. Bài viết rất bổ ích. hịhihihihihiihihihihihihihihihiihhihihihihihihiihhihiihhi
     
    Cùng đọc NỘI QUY DIỄN ĐÀN và ý thức thực hiện cùng BQT xây dựng cộng đồng thêm vững mạnh bạn nhé
    ***** Xin đừng Spam vì một diễn đàn trong sạch *****
Địa chỉ thu mua do cu ho chi minh uy tín, Official Premium Account Reseller Premiumkeystore.com Easily, Instant delivery & Trusted.

Chia sẻ trang này