CSS плавал div с полем между ними (пример img в описании)

Question

Это, вероятно, классическая проблема, но я не могу найти решение. У меня есть несколько div, которые нужно обернуть в контейнер. Это довольно просто, добавив float: left и фиксированную ширину.

Но как мне получить маржу между ними, не имея маржи на правой карте? Эти div генерируются динамически, поэтому я не могу использовать другой класс на втором div для нацеливания на него.

Есть идеи?

Answer 1

, если бы я хотел сделать это строго в CSS без сценариев или вмешательства со стороны сервера, я мог бы использовать свойство nth-child:

CSS

.card { width: 60px; height: 100px; background-color: #ededed; border: 1px solid #999; }
.card:nth-child(even) { float: left; }
.card:nth-child(odd) { float: right; }
#container { width: 130px; }
#header { width: 100%; color: #fff; background-color: #000; margin-bottom: 3px; }

HTML

<div id="container">
    <div id="header">header</div>
    <div class="card">0</div>
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
</div>

http://jsfiddle.net/bpMCB/

Конечно, вам придется поиграться с размерами, чтобы соответствовать тому, что вы пытаетесь сделать.

Answer 2

Могу попробовать:

http://snook.ca/archives/html_and_css/getting_your_di

Еще один способ, которым я придумал, вам нужно место для содержащего div:

<style>
    #container {
        background: white;
        width: 510px;
        height: 610px;
        position: absolute;
    }
    #container2
    {
        width: 520px;
        position: absolute;
    }
    .card {
        background: grey;
        margin: 5px;
        float: left;
        width: 250px;
        height: 300px;
    }
</style>

<div id="container">
</div>
<div id="container2">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

Answer 3

Уловка, которую я иногда использую, состоит в том, чтобы добавить дополнительный более широкий div, чтобы позволить float, а затем скрыть любое перекрытие на div верхнего уровня. Трудно объяснить без примера - , поэтому вот один

.inner div содержит float, потому что он на 10px шире, а .outer div обрезает эти 10px.

HTH:)