CSS: cách tạo con phù hợp với chiều rộng của bố mẹ

Question

Tôi tạo phần tử cha với số lượng là div phần tử con mà sau đó tôi tính chiều rộng cho trong JavaScript, tùy thuộc vào thuộc tính data-value.

Nếu tôi tổng hợp chiều rộng được tính cho tất cả trẻ em, tôi sẽ kết thúc bằng 100%. Nhưng đối với một số lý do trẻ em sẽ không thực sự chiếm 100% chiều rộng của cha mẹ: một phần của các điểm ảnh màu trắng xuất hiện ngay sau đứa trẻ cuối cùng.

Đây là một Fiddle đó chứng tỏ điều này: http://jsfiddle.net/tqVUy/42/

Chrome và Firefox làm cho nó tốt, tôi phải đối mặt với vấn đề này trong Safari và Opera (xin xem hình dưới đây).

Bên cạnh đó, overflow tài sản không hoạt động như mong đợi, như những đứa trẻ yếu tố chồng chéo phụ huynh div (một lần nữa, có liên quan chỉ trong Safari và Opera).

Câu hỏi:

1. Có khác (phải) cách để làm cho trẻ em phù hợp với cha mẹ?
2. Góc tròn và overflow: hidden cho bố mẹ, tôi có thể làm cho nó giống nhau trên tất cả các trình duyệt không?

Answer 1

thêm css:

#component>div{height:100%;} 
#component>div:first-of-type{border-radius:30px 0 0 30px;} 
#component>div:last-of-type{border-radius: 30px;} 

Chỉnh sửa trong js:

$('#component').children().not(':last').each(function() { 

gì xảy ra:
Các div cuối cùng sẽ không nổi bên trái, và sẽ chỉ lấp đầy không gian còn lại. Tôi đã thêm các góc được làm tròn vào div đầu tiên và cuối cùng để sửa vấn đề góc. div cuối cùng có bán kính 30px trong mọi ngóc ngách, vì div là actualy đằng sau divs khác (bạn có thể thấy điều này với kiểm tra nguyên tố)

Demo:
http://jsfiddle.net/tqVUy/48/

Answer 2

Tôi cũng phải đối mặt với loại sự cố đó. Đó là lý do tại sao xác định border-radius cho trẻ cũng vậy. Viết như thế này:

#component > div:first-child{ 
    border-radius:30px 0 0 30px; 
} 
#component > div:last-child{ 
    border-radius:0 30px 30px 0; 
} 

Kiểm tra này http://jsfiddle.net/tqVUy/49/