Wyświetlanie elementów w wielu wierszach za pomocą CSS

Question

Mam kontener o stałej szerokości <div>, który wyświetla jeden lub więcej widżetów <div>. Chcę, żeby wyglądać tak:

< - szare bloki są widgety, czerwony granica jest pojemnik

uproszczony, moja struktura HTML wygląda następująco:

<div id="container"> 
    <div id="widget1">1</div> 
    <div id="widget2">2</div> 
    <div id="widget3">3</div> 
    <div id="widget4">4</div> 
    <div id="widget5">5</div> 
    <div id="widget6">6</div> 
    <div id="widget7">7</div> 
</div> 

Rozważania

1. Widżety mają stałą wysokość, np. 100px
2. Widżety mają ustaloną szerokość, np. 100px, ale mogą być również wielokrotnością tej szerokości (plus wszelkie marginesy przekroczone - patrz widget 1)
3. Widżety powinny być ładnie rozmieszczone z marginesem (lub podobnym), np. 10px
4. Nie wiem, ile będzie widżetów (użytkownik może przypisać dowolną liczbę kontenerów).
5. Kontener ma stałą szerokość, ale nie ma żadnej "wizualnej" stylizacji (czerwona ramka służy do demonstracji).
6. Rozwiązanie musi działać w nowoczesnych przeglądarkach (i MSIE7) i idealnie byłoby czystym CSS.

Z uwagi na 4. Nie mogę przypisać dodatkowego znacznika, np. wiersz div, klasy (. first-child, .last-child) i ze względu na 2.:nth-child nie działa AFAIK.

Czego próbowałem

margin-left na widżety z :first-child ustawienie margin-left: 0 nie wyświetli nowy wiersz prawidłowo.

margin-right na widgetach z :last-child ustawienie margin-right: 0 pierwszy rząd zmusza pojemnik div szerszy i last-child isn't supported until MSIE9.

równe lewe i prawe marginesy (na przykład margines: 0 5px 10px) wymusza ponowne zwiększenie kontenera.

przepełnienie - działa świetnie w mojej głowie! Nie tyle z marginesami, albo z marginesem.

Czy można to zrobić w CSS?

http://jsfiddle.net/agtb/VHXGT/

Answer 1

wierzę myślisz zbyt skomplikowany :-)

Jeśli rozumiem zostanie poprawnie nie potrzebujesz specjalnej obsługi oddzielnych widżetów. Wystarczy podać widżetom cały margines połowy odstępu, a pojemnik ten sam margines, ale ujemny.

#container { 
    width: 440px; 
    margin: -5px; 
} 

#container div { 
    background-color: gray; 
    height: 100px; 
    width: 100px; 
    float: left; 
    margin: 5px; 
} 

Zobacz http://jsfiddle.net/SGdG3/1/

Answer 2

zestaw pojemnik szerokość 400 i pierwszy div szerokość 200 pływak lewo, reszta szerokość 100 pływak lewo