CSS Float Left с маргинальным разделением - PullRequest
Новая
       33

CSS Float Left с маргинальным разделением

0 голосов
/ 01 декабря 2011

При работе с контентом, управляемым данными, из-за чего мы не знаем, сколько элементов будет сгенерировано:

Каждый элемент должен плавать: влево и сидеть рядом, пока они не ссорятся, прежде чем делать еще один.

Я хочу разделить каждый элемент. Если я применю MARGIN или PADDING, это также повлияет на элементы в конце. Я хочу разделить определенное количество пикселей между каждым элементом в строке.

Например: 

.container {
   width:1000px;
}
.bubble {
   width:240px; height:200px; margin-right:10px;
}
<div class="container">
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
<div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div>(would put a margin here too which we do not want)
</div>

1 Ответ

0 голосов
/ 01 декабря 2011

Это трюк, который я обычно использую, когда сталкиваюсь с подобными вещами. 

.container {
    margin: -10px 0 0 -10px;
}
.bubble {
    margin: 10px 0 0 10px;
}

Это сместит контейнер, и ящики будут следовать.Если вы больше не применяете стиль к элементу div, фактически оборачивающему элементы (в данном случае .bubble), пользователь не увидит его, и у вас будет идеальная сетка с полями и всем!

...