Khoảng cách giữa 2 cột css
Xem ví dụ Show Mục đích là chia đều độ rộng giữa các cột trong web. Có 2 điều kiện: Ví dụ: Ở trong ví dụ này bạn thấy là: Published Oct 17th, 2018 9:55 a.m. 3 min read 1. Lời mở đầuCác cột có chiều cao bằng nhau thường xuất hiện trong việc thiết kế giao diện web. Nếu các cột thiết kế trên cùng một giao diện mà chiều cao của các cột không bằng nhau sẽ ảnh hưởng đến việc thiết kế giao diện của khối cũng như tổng thể toàn trang. Vài năm trước, chúng ta đã có thể sử dụng thuộc tính cở bản của 2. Sử dụng các thuộc tính CSS của bảng (Table properties)Đầu tiên chúng ta phải kể đến đó là cách sử dụng thuộc tính của HTML:
CSS:
3. Sử dụng CSS gridPhương pháp tiếp theo tôi nhắc đến là phương pháp sử dụng grid. Phương pháp này hơi phức tạp hơn một chút bởi bạn cần tính toán chiều rộng của các cột bên trong phần tử cha bằng cách sử dụng Ví dụ:
Ngoài ra để 2 cột có chiều cao bằng nhau và khoảng cách giữa 2 cách nhau 1 khoảng cách nhất định ( giống như cột Ví dụ:
Trong đó :
Sau đây là ví dụ cụ thể: HTML:
CSS
4. Sử dụng CSS FlexboxSử dung flexbox là cách tiếp cận mới và sử dụng dễ dàng hơn. Không những có thể tạo ra được các cột bằng nhau giống như HTML
CSS
Demo: 5. Kết luậnĐó là một số cách tạo ra các cột bằng nhau với css hiện nay, bạn có thể chọn một trong các cách trên trên để tạo giao diện web đẹp mắt. Phương pháp đơn giản, tối ưu và được sử dụng phổ biến nhất hiện nay là sử dụng css flexbox. All Rights Reserved |