Xác minh divs bằng CSS để điền chiều rộng của vùng chứa mẹ

Question

Tôi có một trang có chiều rộng vùng chứa 100% sao cho toàn bộ chiều rộng của màn hình, tôi có một số DIV trong cấu trúc lưới, tất cả đều có dấu phẩy: trái trên chúng và không đặt chiều rộng, chỉ cần lề 10px.

Có phương pháp, sử dụng CSS hay jQuery, để có các div lấp đầy toàn bộ chiều rộng và biện minh cho phù hợp với khoảng trống, do đó, thay đổi lề tùy thuộc vào kích thước màn hình.

Answer 1

Kiểm tra câu trả lời thirtydot trong chủ đề này cho một giải pháp CSS/HTML thuần túy mà không cần JavaScript mà làm việc trong tất cả các trình duyệt bao gồm IE 6.

Fluid width with equally spaced DIVs

http://jsfiddle.net/thirtydot/EDp8R/

HTML:

<div id="container"> 
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
    <div class="box4"></div> 
    <span class="stretch"></span> 
</div>​ 

CSS:

#container { 
    border: 2px dashed #444; 
    height: 125px; 

    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 

    /* just for demo */ 
    min-width: 612px; 
} 

.box1, .box2, .box3, .box4 { 
    width: 150px; 
    height: 125px; 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1 
} 
.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
} 

.box1, .box3 { 
    background: #ccc 
} 
.box2, .box4 { 
    background: #0ff 
} 

Answer 2

Bạn có thể làm điều này với CSS nếu chỉ định tất cả các tham số trong phần trăm (ví dụ: chiều rộng, lề, đệm).

Hoặc nếu bạn muốn có một margin hoặc padding cụ thể, bạn có thể sử dụng jQuery

$(window).resize(function() { 
    var $columns = $('.column'), 
     numberOfColumns = $columns.length,    
     marginAndPadding = 0, 
     newColumnWidth = ($('#container').width()/numberOfColumns) - marginAndPadding, 
     newColumnWidthString = newColumnWidth.toString() + "px"; 

    $columns.css('width', newColumnWidthString); 
}).resize(); 

Answer 3

Sử dụng CSS3 giờ đây cực kỳ dễ dàng.

CẬP NHẬT

hỗ trợ gia tăng MS IE (tin vào nó hay không ...). Tôi không chắc chắn về công cụ FF vì Mozilla đã thay đổi thứ gì đó. Tôi không có nhiều thời gian. Vì vậy, nếu một người nào đó có thể có thể đúng cho tôi ...

CẬP NHẬT II

đang chuyển đến đoạn mã

.container { 
 
    border: 1px solid black; 
 
    display: -webkit-box; 
 
    -webkit-box-pack: justify; 
 
    -webkit-box-align: center; 
 
    display: -moz-box; 
 
    -moz-box-pack: justify; 
 
    -moz-box-align: center; 
 
    display: -ms-flexbox; 
 
    -ms-flex-pack: justify; 
 
    -ms-flex-align: center; 
 
    display: box; 
 
    box-pack: justify; 
 
    box-align: center; 
 
} 
 
.child { 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <div class="child"> 
 
    Some Content 
 
    </div> 
 
    <div class="child"> 
 
    Some Content 
 
    </div> 
 
    <div class="child"> 
 
    Some Content 
 
    </div> 
 
</div>