Chia đều khoảng trống cho mỗi phần tử

Question

Có cách nào để chia khoảng trắng (hoặc div) cho mỗi phần tử không có chỉ định giá trị tuyệt đối cho width hay không. CHỈ để làm cho mã CSS linh hoạt.

Ví dụ nếu bạn đặt các yếu tố vào một div:

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

CSS sẽ tự động cung cấp cho mỗi phần tử .childwidth=50%

Và trong ví dụ này:

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

CSS sẽ cũng tự động cung cấp cho mỗi yếu tố .childwidth=25%

Có thể không?

Answer 1

bạn phải sử dụng bảng tôi sợ và thêm một bọc cho các div con, bạn có thể làm điều đó như vậy:

#parent{ 
width: 1000px; /* Example width */ 
height: 100px; /* Example height */ 
display: table; 
table-layout: fixed; 
} 
.childwrap { 
display:table-row; 
} 
.child{ 
display: table-cell; 
} 

Ví dụ: http://cssdesk.com/rZKRW

Answer 2

Bạn chắc chắn có thể. Chỉ cần áp dụng một giá trị với phần trăm cần thiết cho thuộc tính chiều rộng và chắc chắn áp dụng một giá trị được xác định cho cha mẹ của chúng. Đó là tất cả.

.child { 
with:50%; 
} 

hoặc cho 4 trẻ em của bạn ...

.child { 
width:25%; 
} 

Đối với điều này để làm việc trong các chi tiết khác chiều rộng tổ tiên phải được xác định. Nếu chiều rộng của tổ tiên phụ thuộc vào nội dung trẻ em thì có một cơ hội để hava một chiều rộng không thể tranh cãi.

Nếu tổ tiên của bạn div tự HAVA một giá trị porcentual, sau đó nó sẽ được yêu cầu mà tổ tiên của mình để có một định nghĩa với và vân vân ..

Answer 3

Bạn có thể sử dụng mã jQuery dưới đây:

var childs = $('#parent .child') 
    ,width = Math.floor(100/childs.length); 
childs.css('width',width+'%');