CSS: Wie man Kinder fit Eltern Breite machen

Question

Ich erstelle Elternelement mit einer Anzahl von div Kinder Elemente, die ich dann Breite für in JavaScript berechnen, abhängig von data-value Attribut.

Wenn ich die berechnete Breite für alle Kinder summiere, werde ich mit 100% enden. Aber aus irgendeinem Grund würden Kinder nicht wirklich 100% der Elternbreite einnehmen: Ein Teil der weißen Pixel erscheint direkt nach dem letzten Kind.

Dies ist ein Fiddle, dass dies zeigt: http://jsfiddle.net/tqVUy/42/

Chrome und Firefox es gut machen, ich Gesicht dieses Problem in Safari und Opera (bitte auf das Bild unten sehen).

Abgesehen davon, hat overflow Eigenschaft nicht wie erwartet, als Kinder Elemente der Mutter div (wiederum nur relevant in Safari und Opera) überlappen. Fragen

:

1. Gibt es andere (rechts) Weg, um Kinder fit Eltern zu machen?
2. Abgerundete Ecken und overflow: hidden für die Eltern, kann ich es über alle Browser gleich aussehen lassen?

Answer 1

Hinzugefügt css:

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

bearbeiten in js:

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

Was passiert:
Die letzte div wird nicht schwimmen links, und wird nur den Raum füllen, der übrig ist. Ich habe dem ersten und letzten div abgerundete Ecken hinzugefügt, um das Eckenproblem zu beheben. der letzte div einen 30px Radius in jeder Ecke hat, weil die div actualy hinter dem anderen divs ist (sehen Sie, dieses Element inspizieren mit)

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

Answer 2

Ich habe auch diese Art von Problem. Definieren Sie deshalb auch das Kind border-radius. Schreiben wie folgt aus:

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

prüfen diese http://jsfiddle.net/tqVUy/49/