При заданном сжатии полей, как равномерно распределить дочерние элементы внутри родительского элемента? - PullRequest
Новая
       2

При заданном сжатии полей, как равномерно распределить дочерние элементы внутри родительского элемента?

1 голос
/ 24 февраля 2011

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

-------------
|           | <-- "Top space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Middle space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Middle space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Bottom space"
-------------
 ^        ^
left     right
space    space

Я хочу, чтобы все эти "пробелы" были равны.

Я хочу, чтобы расстояние между каждым дочерним элементом было 10px, а пространство между дочерними элементами и родителем - 10px. Если у меня есть поле 10px для каждого дочернего элемента и нет отступов для родительского элемента, то "верхний пробел" и "нижний пробел" будут 0px. Если у меня есть какие-либо отступы в родительском элементе, «среднее пространство» будет отличаться от верхнего / нижнего пространства.

Как я могу это сделать? Я не хочу плавать или очищать какие-либо элементы или даже добавлять новые элементы для достижения этой цели. Я просто думаю, что мне здесь не хватает умной математики.

Ответы [ 3 ]

3 голосов
/ 25 февраля 2011

Это самый простой способ:

  • Просто добавьте прозрачный border к содержащему элементу.

Live Demo

HTML: 

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

CSS: 

#container {
    background: #ccc;
    width: 200px;
    border: 1px solid transparent /* "magic border" fixes it */
}
.square {
    margin: 10px;
    height: 50px;
    background: #f0f
}

В качестве альтернативы вы можете использовать position: absolute:

Демонстрация в реальном времени

1 голос
/ 24 февраля 2011

Дочерние элементы можно задать с полем 10px, затем для родительского отступа 10px.Я закодирую его

РЕДАКТИРОВАТЬ:

  1. Как насчет использования границ?- Нет
  2. родитель - display:table;

HTML: 

<div>
    <p>Alex</p>
    <p>James</p>
    <p>thomas</p>
</div>

CSS: 

div{display:table;}
p{margin:10px;}

http://jsfiddle.net/nqLYT/

0 голосов
/ 24 февраля 2011

Я бы попробовал 

.children{
margin: 5px;
}

.parent{
padding: 5px;
}

Это должно быть 10px для всех направлений.Правильно?

...