Làm cho các div con mở rộng để lấp đầy chiều rộng của cha mẹ

Question

Vì vậy, tôi có ba div trong một div.

<div class="parent"> 
<div class="child> Text</div> 
<div class="child">Text</div> 
<div class="child">Text</div> 
</div> 

Tôi muốn các div con để lấp đầy chiều rộng của phụ huynh (chiều rộng kết hợp của trẻ em phải là cha mẹ). Tuy nhiên, điều này không xảy ra, tôi đang rơi ngắn. Tôi nghĩ rằng điều này là do các div con đang thiết lập chiều rộng dựa trên nội dung của chúng.

Làm cách nào để đạt được những gì tôi muốn?

CSS-

.child { 
    background: white; 
    color: #a7a9ac; 
    cursor: pointer; 
    font-size: 15px; 
    border-right: 1px; 
    border-top: 0; 
    border-bottom: 0; 
    border-left: 0; 
    border-style: solid; 
    border-color: @faded-grey; 
    padding-right: 10px; 
    margin: 0 auto; 
    height: 100%; 
} 

.parent { 
    border-top: 1px; 
    border-left: 0; 
    border-bottom: 1; 
    border-style: solid; 
    border-color: @faded-grey; 
    border-right: 0; 
    width: 100%; 
    margin-right: 0px; 
    height: 80px; 

} 

Answer 1

Nếu bạn biết sẽ luôn có ba đứa con, bạn chỉ có thể sử dụng:

.parent > .child { 
    float: left; 
    width: 33%; 
} 

.parent { 
    overflow: auto; /*or whatever float wrapping technique you want to use*/ 
} 

Nếu bạn không biết bao nhiêu trẻ em có, bạn sẽ cần phải sử dụng bảng CSS, flexbox hoặc có thể kết hợp các khối nội tuyến với căn chỉnh văn bản: biện minh.

Answer 2

Bạn có thể thêm ba thuộc tính cho quy tắc .child CSS:

width:33%; 
float:left;  
box-sizing: border-box; 

Dòng cuối cùng làm cho chắc chắn nó cũng sẽ làm việc khi bạn thêm đường viền, padding và margin để các hộp.

ONLINE DEMO

Ps: không liên quan trực tiếp nhưng đó cũng là một lỗi trong border-bottom cho phụ huynh, sửa chữa trong fiddle trên. Khi bạn sử dụng giá trị khác 0 bạn cần phải xác định đơn vị:

border-bottom:1px; 

Answer 3

tôi cần cho giải pháp của tôi để phù hợp với một khác biệt trong số lượng các yếu tố để họ được hoàn toàn đáp ứng.

Tôi đã khám phá ra một giải pháp thú vị cho điều này. Về cơ bản nó hiển thị như một cái bàn. Mỗi cổ phiếu yếu tố có sẵn chiều rộng, và điều này cũng làm việc cho hình ảnh rất tốt: http://jsfiddle.net/8Qa72/6/

.table { 
    display: table; 
    width: 400px; 
} 

.table .row { 
    display: table-row; 
} 

.table .row .cell { 
    display: table-cell; 
    padding: 5px; 
} 

.table .row .cell .contents { 
    background: #444; 
    width: 100%; 
    height: 75px; 
}