Я думаю, что это тяжело.
Я использую сетку с использованием float:left. Я мог бы переписать его с помощью display:inline-block, но это ничего не изменит.
Скажем, у нас есть два столбца:
<div class="row">
<div class="column">
<!-- some content here -->
</div>
<div class="column">
<!-- some content here -->
</div>
</div>
Если я помещаю в него элемент блока с краем-вершиной (например, <h1>), я получаю не сворачивающиеся поля в контент раньше. Это нормально, поскольку оно всегда как таковое с плавающими элементами (или отображает: встроенный блок).
Но я хочу иметь сворачивающиеся поля. Я много старался заставить его работать, но кажется, что каждый CSS, который будет помещать два элемента рядом друг с другом, уничтожит сворачивающиеся поля для содержимого выше.
Я знаю, я мог бы использовать CSS, чтобы получить первый-элемент элемента, чтобы избавиться от margin-top. Но в этом случае это не будет применяться, потому что контент построен с помощью CMS, и до тех пор, пока я не доберусь до элемента, может существовать произвольный уровень глубины элемента.
Есть ли способ сделать это без JavaScript?
Fiddle: http://jsfiddle.net/HerrSerker/ZSV3D/
Вы можете видеть, что маржа-вершина h1 и margin-bottom .header не разрушаются. Это с помощью float:left of .column.
.header {
font-size: 24px;
background: rgba(0,255,0,0.1);
}
h1 {
background: silver;
margin-bottom: 50px;
font-size: 28px;
}
.column {
float: left;
width: 50%;
background: rgba(255,0,0,0.1);
}
h2 {
background: gold;
margin-top: 50px;
font-size: 24px;
}<div class="header"><h1><h1>Headerh1</h1></h1></div>
<div class="row">
<div class="column"><h2><h2>Col 1, float: left</h2></h2></div>
<div class="column"><h2><h2>Col 2, float: left</h2></h2></div>
</div>
<p>I want a 50 pixel margin between Header and the Cols, but the two margins don't collapse and I end up with 50 + = 100 pixel gap. If it would work, you wouldn't see the light red above col1 and col2</p>