css / html: проблема с вертикальным выравниванием (добавлено демо) - PullRequest
Новая
       5

css / html: проблема с вертикальным выравниванием (добавлено демо)

0 голосов
/ 19 февраля 2010

У меня проблема с выравниванием некоторых div в этом случае: 

<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
    <div id="content" style="position: relative; margin-top: 50px;">
        Content
    </div>
</div>

(Конечно, это только пример, который воспроизводит поведение, которого я хочу избежать.)

Я бы ожидал, что content-div выровняется от контейнера-div. Следовательно, между «Преамбулой» и «Контентом» должно быть не более 150 пикселей.

Однако (по крайней мере, в Firefox) это не так. Контейнер-div просто игнорируется, и поэтому поле-вершина содержимого div также игнорируется, если оно не больше поля-вершины поля-преамбулы div-преамбулы.

Что я могу сделать? Есть ли дополнительное css-правило, которое я должен был бы применить? Я хотел бы сохранить положение: относительно так же, как html-структура.

Спасибо!

[edit2]

Надеюсь, ты еще со мной; -)

Извините за задержку ... вот демо. Это так живо, я даже сделал небольшой jquery-скрипт, чтобы проиллюстрировать проблему - просто попробуйте кнопки. Live Demo

Спасибо!

[править]

Так оно и есть:

bad
(источник: 666kb.com )

так, как я хочу (без границ)

alt text
(источник: 666kb.com )

Надеюсь, разница очевидна, хотя изображения резкие; -)

Ответы [ 3 ]

1 голос
/ 19 февраля 2010

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

Спецификация CSS2 гласит:

В этой спецификации выражение сжимающиеся поля означает, что примыкающие поля (нет непустых областей содержимого, отступов или границ илиочистите их друг от друга) из двух или более блоков (которые могут быть рядом друг с другом или вложенными) объединить, чтобы сформировать единое поле.

В вашем случае, потому что #preamble 'margin-bottom и#container 'margin-top перекрываются, они сворачиваются, поэтому эффективный запас больше (в данном случае 100px).

Если цвет фона не является проблемой, вы можете использовать paddingвместо margin.

0 голосов
/ 19 февраля 2010

Я нашел выход из этого чуда: старый добрый переполнение: скрыто;трюк ...

При добавлении свойства переполнение: скрыто;для #container поведение такое же, как и ожидалось.

Вы можете доказать разницу здесь

Тем не менее я не совсем убежден.Почему этот трюк решает мою проблему и есть ли другие способы сделать это?

В любом случае, спасибо за вашу помощь!

0 голосов
/ 19 февраля 2010 
<div id="preamble" style="margin-bottom: 100px;">Preamble</div> 
<div id="container" style="position: relative;"> 
    <div id="content" style="position: relative; margin-top: 50px;"> 
        Content 
    </div> 
</div>

Прежде всего, я заново создаю таблицу стилей. Это сэкономит ваше время, когда у вас будет много элементов, а также сохранит ваш код чище.

Что я вижу, когда проверяю ваш код, так это то, что div содержимого отображается внутри контейнера с полем в верхней части 50 пикселей. Что не так?

Я думаю, что вы хотите достичь, это: 

<div id="preamble" style="margin-bottom: 100px; border: solid black 1px;">Preamble
 <div id="container" style="position: relative; border: solid black 1px;"> 
  <div id="content" style="position: relative; margin-top: 50px; border: solid black 1px;"> 
   Content 
  </div> 
 </div> 
</div>

Удачи! Вы не вложили Div внутри другого, и, следовательно, это не было бы 150px вместе;). Помните, что Маржа за пределами ячейки и отступы внутри ячейки!

Когда я читаю сейчас, что вы хотите сохранить свою структуру HTML такой же, это невозможно. Как только вы дадите своему первому div с полем 100px, это означает, что следующий элемент будет размещен под этим элементом на 100px. А так как вы следующий вложенный div с полем сверху 50px, это означает, что вы создаете более 150px общего пространства ...

Почему вы хотели сохранить свою HTML-структуру?

...