Предотвращение разрыва страницы между элементами 2 div

У меня сейчас проблема. Это только беспокоит Firefox (тестирование с помощью FF10), эта ошибка не возникает в Chrome 17 или любом IE.Предотвращение разрыва страницы между элементами 2 div

Вот что. У меня есть такая архитектура страницы, которая выглядит так:

<div id="container"> 
    <div id="a"> 
     <img src="foo/bar.png" /> 
    </div> 
    <div id="b"> 
     <div id="c"> 
      <!--short content--> 
     </div> 
     <div id="d"> 
      <!--long content--> 
     </div> 
    </div> 
</div>

EDIT: Некоторые попросили часть CSS. Мой код здесь упрощается, вот упрощенная версия css для соответствия.

#container { 
    margin: 0 auto; 
    position: relative; 
    width: 1000px; 
} 

#a{ 
    height: 156px; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
    top: 2px; 
    width: 918px; 
} 

#b { 
    background-color: #FFFFFF; 
    font-size: 12px; 
    margin: 0 auto; 
    text-align: left; 
    width: 958px; 
} 

#c{ 
    background: url("images/top_content.gif") no-repeat scroll left top #FFFFFF; 
    height: 50px; 
    margin: 0 auto; 
    width: 100%; 
} 

#d{ 
    padding: 40px 0px; 
}

в качестве бонуса, вычисленная высота #d DIV является 874px (с поджигатель Процент от)

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

enter image description here

Это происходит только тогда, когда, например, в хроме, я могу видеть, что содержание #d будет кровоточить на второй странице.

Так что вот и вопрос. Как предотвратить разрыв строки между #c и #d divs?

источник

2012-02-10 Fredy31

Вы можете обновить свой вопрос, разместив CSS-элементы контейнера, a, b и c?Закрытие '>' отсутствует на вашем контейнере div anyway – fcalderan

Я просто добавил хорошую часть CSS к Вопросу. – Fredy31

Это происходит только во время печати или при просмотре страницы в обычном режиме? – j08691

Вы имеете в виду, как предотвратить разрыв страницы при печати?

#c{ 
    page-break-after: avoid; 
} 

#d { 
    page-break-before: avoid; 
}

источник

2012-02-10 16:22:09

Ну, это дало мне некоторую надежду. Я пробовал, не работал. W3Schools говорит: «Примечание. Firefox, Chrome и Safari не поддерживают значения свойств« избегать »,« левый »или« правый ». Ну, по крайней мере, это хорошо знать. Может пригодиться позже по линии. – Fredy31

Хм, это тоже плохо. Что произойдет, если у вас есть меньшие subdivs в #d? Разве это ломает #d? –

В div #d уже есть тонна подразделений. Я просто упростил код для публикации вопроса, не слишком много рассказывая о проекте. В #d div, theres 2 других divs, один содержит абзацы, а другой - ползунок. – Fredy31

Я пришел сюда, с той же проблемой. И я нашел решение!

Моя ситуация:

У меня есть DIV, который служит в качестве заголовка
затем другой DIV, который содержит очень длинный предварительно
, что предварительно проходит через несколько страниц

Пример:

<div>Heading</div> 
<div> 
    <pre>Very long pre.</pre> 
</div>

Проблема:

Мой Заголовок отображается Div на странице 1
Предварительно начинается на странице 2 - так огромный разрыв между «заголовок» и содержание.

Решение:

Наконец, я пытался сделать мой предварительный стиль display: inline. Тада! Теперь мой заголовок div и начало предварительного запуска на странице 1 вместе!

Возможно, вы можете столкнуться с отображением ваших элементов, чтобы лучше контролировать это. Надеюсь, это поможет тому, кто снова споткнется здесь!

источник

2014-03-19 21:26:34 amurrell

Предотвращение разрыва страницы между элементами 2 div

ответ

Смежные вопросы