Нормализовать воспринимаемое заполнение элемента с неизвестными дочерними элементами - PullRequest
Новая
       5

Нормализовать воспринимаемое заполнение элемента с неизвестными дочерними элементами

1 голос
/ 21 октября 2011

У меня есть <div> в стиле коробки: 

.box {
    border:2px solid #ccc;
    background:#eee;   
    padding:1em;
    margin:1em;
}

В этом поле может быть любое количество дочерних элементов любого типа в любом порядке: 

<div class="box">
    <h3>Howzit goin</h3>
    <p>Here comes a list:</p>
    <ul>
        <li>I don't know what</li>
        <li>this box will contain</li>
        <li>but it could be anything</li>
    </ul>
</div>

Большинство или все дочерние элементы наследуют нижнее поле различной длины из базовой таблицы стилей оформления: 

/* Example global typography */
p {margin:0 0 1.5em;}
ul {margin:0 0 2.5em;}

Который производит вывод как это:

enter image description here

... но мы хотим нормализовать «заполнение» поля, чтобы оно выглядело равным со всех сторон:

enter image description here

  • .box :last-child было бы слишком просто, это должно работать как минимум в IE8, а также современные браузеры (но их можно использовать вместе с методом только для IE).
  • Я не хочу использовать дополнительную разметку или javascript.

Есть ли какой-нибудь другой трюк CSS, который я могу использовать для получения нужного результата?

Скрипка: http://jsfiddle.net/yuXcH/1/

Ответы [ 2 ]

1 голос
/ 21 октября 2011

Как вы можете прочитать в этом вопросе , даже если ему около 2 лет, в IE8 нет «легкого» способа сделать это (другой поток только о IE6 / 7, но вещи покане изменились - IE8 тоже не поддерживает :last-child).

На мой взгляд, лучший способ - вручную добавить класс last-child к вашему последнему ребенку, чтобы вы могли сделать: 

.box .last-child{ margin-bottom: 0; }

Альтернативой является использование javascript, что проще, если у вас много ящиков.С jQuery это выглядело бы так: 

$(function(){
  $(".box :last-child").css("margin-bottom","0");
})

Единственное решение «чистого CSS», о котором я могу подумать, - это изменение всех ваших отступов / полей, чтобы всегда получалось окнос одинаковыми отступами со всех сторон, как предложил Лоллеро, но это, по сравнению с вашим предыдущим решением, приведет к разным полям между элементами внутри коробки.

0 голосов
/ 21 октября 2011

Вероятно, я бы компенсировал дополнительное пространство наличием отступов или полей в верхней и нижней частях.

http://jsfiddle.net/lollero/yuXcH/2/

Также могут быть использованы некоторые отступы в верхней и / или нижней части родительского элемента.

http://jsfiddle.net/lollero/yuXcH/3/

...