Hiển thị các phần tử trong nhiều hàng bằng cách sử dụng CSS

Question

Tôi có vùng chứa chiều rộng cố định <div> hiển thị một hoặc nhiều tiện ích <div> s. Tôi muốn nó trông như thế này:

< - khối màu xám là widget, đường viền màu đỏ là container

giản, cấu trúc của tôi trong HTML trông như thế này:

<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> 

cân nhắc

1. Tiện ích con sẽ có chiều cao cố định, ví dụ: 100px
2. Tiện ích sẽ có chiều rộng cố định, ví dụ: 100px nhưng chúng cũng có thể là bội số của chiều rộng đó (cộng với bất kỳ lề nào được gạch chéo - xem tiện ích 1)
3. Widget nên được đặt cách nhau một cách độc đáo với lề (hoặc tương tự), ví dụ: 10px
4. Tôi không biết số lượng tiện ích sẽ có (người dùng có thể chỉ định bao nhiêu hoặc ít tùy thích cho vùng chứa).
5. Thùng chứa có chiều rộng cố định nhưng không có kiểu dáng "trực quan" (viền đỏ) để minh họa)
6. Giải pháp phải hoạt động trong trình duyệt hiện đại (và MSIE7) và lý tưởng là CSS thuần túy.

Vì xem xét 4. Tôi không thể chỉ định đánh dấu bổ sung, ví dụ: hàng div, các lớp (.first-child, .last-child) và vì 2.:nth-child sẽ không hoạt động AFAIK.

Những điều tôi đã cố gắng

margin-left trên widget với :first-child thiết margin-left: 0 sẽ không hiển thị một hàng mới đúng.

lề phải trên các tiện ích có cài đặt :last-childmargin-right: 0 hàng đầu tiên buộc div vùng chứa rộng hơn và last-child isn't supported until MSIE9.

lề trái và phải bằng nhau (ví dụ: lề: 0 5px 10px) buộc lại vùng chứa.

tràn - hoạt động tuyệt vời trong đầu của tôi! Không quá nhiều với một trong hai lề hoặc đệm.

Có cách nào để thực hiện điều này trong CSS không?

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

Answer 1

Tôi tin rằng bạn đang suy nghĩ quá phức tạp :-)

Nếu tôi hiểu bạn một cách chính xác bạn không cần bất kỳ xử lý đặc biệt nào của các tiện ích riêng biệt. Chỉ cần cung cấp cho các vật dụng một khoảng xung quanh một nửa khoảng cách, và container cùng lề nhưng tiêu cực.

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

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

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

Answer 2

bộ chứa rộng 400 và div đầu tiên chiều rộng 200 float trái, nghỉ ngơi chiều rộng 100 float trái