Nếu css3 là một tùy chọn, điều này có thể được thực hiện bằng cách sử dụng calc()chức năng css .
Trường hợp 1: Xác minh các hộp trên một dòng ( FIDDLE )
Markup rất đơn giản - một loạt các div với một số phần tử container.
CSS trông như thế này:
div
{
height: 100px;
float: left;
background:pink;
width: 50px;
margin-right: calc((100% - 300px) / 5 - 1px);
}
div:last-child
{
margin-right:0;
}
Trong đó -1px để sửa lỗi IE9 + calc / làm tròn - xem tại đây
Trường hợp 2: Xác minh các hộp trên nhiều dòng ( FIDDLE )
Ở đây, ngoài calc()chức năng, media querieslà cần thiết.
Ý tưởng cơ bản là thiết lập truy vấn phương tiện cho từng trạng thái #columns, sau đó tôi sử dụng calc () để tìm ra lề phải trên mỗi phần tử (ngoại trừ các phần tử trong cột cuối cùng).
Điều này nghe có vẻ nhiều việc, nhưng nếu bạn đang sử dụng LESS hoặc SASS thì việc này có thể được thực hiện khá dễ dàng
(Nó vẫn có thể được thực hiện với css thông thường, nhưng sau đó bạn sẽ phải thực hiện tất cả các phép tính bằng tay, và sau đó nếu bạn thay đổi độ rộng hộp của mình - bạn phải làm lại mọi thứ một lần nữa)
Dưới đây là một ví dụ sử dụng LESS: (Bạn có thể sao chép / dán mã này vào đây để chơi với nó, [đó cũng là mã tôi đã sử dụng để tạo fiddle đã đề cập ở trên])
@min-margin: 15px;
@div-width: 150px;
@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);
@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);
*{margin:0;padding:0;}
.container
{
overflow: auto;
display: block;
min-width: @3divs-width;
}
.container > div
{
margin-bottom: 20px;
width: @div-width;
height: 100px;
background: blue;
float:left;
color: #fff;
text-align: center;
}
@media (max-width: @3divs-width) {
.container > div {
margin-right: @min-margin;
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @3divs-width) and (max-width: @4divs-width) {
.container > div {
margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
}
.container > div:nth-child(3n) {
margin-right: 0;
}
}
@media (min-width: @4divs-width) and (max-width: @5divs-width) {
.container > div {
margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
}
.container > div:nth-child(4n) {
margin-right: 0;
}
}
@media (min-width: @5divs-width) and (max-width: @6divs-width) {
.container > div {
margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
}
.container > div:nth-child(5n) {
margin-right: 0;
}
}
@media (min-width: @6divs-width){
.container > div {
margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
}
.container > div:nth-child(6n) {
margin-right: 0;
}
}
Vì vậy, về cơ bản, trước tiên bạn cần quyết định chiều rộng hộp và lề tối thiểu mà bạn muốn giữa các hộp.
Cùng với đó, bạn có thể tìm ra bao nhiêu không gian bạn cần cho mỗi tiểu bang.
Sau đó, sử dụng calc () để vôi hóa lề phải và con thứ n để loại bỏ lề phải khỏi các hộp trong cột cuối cùng.
Các lợi thế của câu trả lời này so với câu trả lời được chấp nhận trong đó sử dụng text-align:justifylà khi bạn có nhiều hơn một dãy hộp - các ô trên dòng cuối cùng không có được 'chứng minh' ví dụ: Nếu có 2 hộp còn lại trên hàng cuối cùng - Tôi không muốn hộp đầu tiên ở bên trái và hộp tiếp theo ở bên phải - mà là các hộp theo nhau theo thứ tự.
Về hỗ trợ trình duyệt : Điều này sẽ hoạt động trên IE9 +, Firefox, Chrome, Safari6.0 + - (xem tại đây để biết thêm chi tiết) Tuy nhiên tôi nhận thấy rằng trên IE9 + có một chút trục trặc giữa các trạng thái truy vấn phương tiện. [nếu ai đó biết cách khắc phục điều này tôi thực sự muốn biết :)] <- CỐ ĐỊNH TẠI ĐÂY
display:inline-block;thay vì nổi?