Vấn đề với float
Thông thường để chia giao diện thành từng cột mình thường dùng float nhưng nó có nhược điểm là các cột không thể luôn căn giữa theo chiều ngang so với phần tử bao ngài hoặc căn giữa theo chiều dọc so với nhau.
Khắc phục với display:inline-block
Mình dùng display:inline-block để làm được việc trên.
<div class="wrap"> <div class="col-1"> column 1</div><div class="col-2"> column 2 </div> </div> .wrap { overflow: hidden;/**/ text-align: center;/*căn giữa .col-1, .col-2*/ } .col-1,.col-2 { width: 50%; /*float: left;*/ /*-> dung float thì chỉ có thể căn trái hoặc phải */ display: inline-block; vertical-align: middle; /* căn giữa các cột theo chiều dọc */ } .col-1 { background: red; height: 100px; } .col-2 { background: blue; height: 200px; }demo
Khoảng trắng không mong muốn
Tới đây một số bạn có thể thắc mắc tại sao mình viết html cho ví dụ trên khó nhìn thế kia.
Nếu mình giữ nguyên css rồi sửa lại đoạn html kia thành:
<div class="wrap"> <div class="col-1"> column 1</div> <!-- có khoảng trắng ở đây--><div class="col-2"> column 2 </div> </div>hoặc
<div class="wrap"> <div class="col-1"> column 1</div> <!-- có xuống dòng ở đây--> <div class="col-2"> column 2 </div> </div>demo
thì .col-1 và .col-2 sẽ lập tức bị rớt xuống và không còn nằm trên cùng một dòng nữa.
Một chút thay đổi tuy nhỏ nhưng đôi khi có thể gây rắc rối lớn.
Nguyên nhân do đâu?
Đó là do các phần tử inline và inline-block mặc định hiển thị khoảng trắng (nếu có) giữa chúng với độ rộng là 4px và khoảng trống này tới từ word-spacing mặc định của trình duyệt.
Mặc định thì trình duyệt có word-spacing là 0px ở trạng thái này không phải các từ sẽ hiển thị sát nhau hoàn toàn mà giữa chúng vẫn có khoảng cách là 4px tức là khi ta cho word-spacing: 1px thì khoảng cách thực sự phải là 5px và word-spacing: -4px thì các từ sẽ sát nhau hoàn toàn.
demo
Với các phần tử block thì word-spacing chỉ ảnh hưởng tới khoảng cách của các từ trong đoạn text chứa trong nó nhưng với các phần tử inline và inline-block thì nó còn ảnh hưởng tới cả khoảng cách giữa các phần tử với nhau.
Trong ví dụ trên sở dĩ .col-1 và .col-2 không nằm trên cùng một hàng là do giữa chúng có thêm khoảng trống 4px. Các bạn có thể thấy rõ điều này khi mình cho width nhỏ lại. demo
Loại bỏ phần thừa này bằng cách nào?
Sửa trong code html
Cách này mình đã làm ở ví dụ trên chỉ cần loại bỏ khoảng trắng giữa phần tử inline-block trong code html, nếu muốn code đẹp hơn có thể viết như sau:
<div class="col-1"> column 1</div><!-- thích xuống bao nhiêu hàng cũng ok --><div class="col-2"> column 2 </div>Dùng css
Nguyên nhân là do word-spacing nhưng khi font-size là 0px thì text sẽ biến mất hoàn toàn vì thế word-spacing sẽ không còn ý nghĩa. Do đó nếu dùng css chỉ cần cho phần tử bao ngoài có word-spacing: -4px hoặc font-size: 0px sau đó đặt lại font-size hoặc word-spacing cho các phần tử con.
.wrap { word-spacing: -4px; /*hoặc*/ /*font-size: 0px;*/ } .col-1, .col-2 { word-spacing: 0px; /*hoặc*/ /*font-size: 14px;*/ }demo
Đây là bài viết đầu tiên của mình nên sẽ có nhiều sai sót mong rằng sẽ nhận được nhiều ý kiến đóng góp từ mọi người để mình hoàn thiện hơn cho những bài sau.