Запретить всплывающим элементам div переходить на следующую строку

Вот мой сайт, прежде всего:

http://www.kaiserroof.com/test/index2.html

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

Я надеюсь это имеет смысл. Любая помощь будет принята с благодарностью.

Источник

4 ответа

Решение

Вы также можете достичь этого только с помощью CSS.

Просто назначьте следующие атрибуты CSS для #row4:

#row4 {
    min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
    overflow:hidden;
}

Это немного отличается от вашего предполагаемого решения, так как правая рамка останется частично видимой при изменении размера окна и не сразу исчезнет полностью.

Помните, что минимальная ширина не будет работать в IE6. Однако есть несколько способов эмулировать свойство min-width, если вам нужно поддерживать старые IE:

http://www.thecssninja.com/xhtml/ie6-min-width-solutions

Источник

Вы можете дать им div-обертку с установленной минимальной шириной и заставить ее использовать горизонтальную полосу прокрутки, если она становится слишком маленькой. Хорошая особенность div-обертки в том, что вы также можете задать ему максимальную ширину и не допустить, чтобы на супер огромных мониторах все шло вразрез.

Я не фанат горизонтальных полос прокрутки, но это лучше, чем полное удаление контента.

Источник

Хорошо, вот что вы должны сделать

Оберните все три плавающих деления на родительский div, как-то так

<div id="parent">
    <div class="form">......</div>
    <div class="text">......</div>
    <div class="links">.....</div>
</div>

Теперь, чтобы решить вашу проблему, задайте фиксированную высоту parent див как

#parent { height:400px;clear:both; }
Источник

Вы должны будете использовать Javascript, чтобы получить ширину области просмотра, а затем изменить свойство отображения div, который переносится для отображения: нет, чтобы оно не отображалось, когда ширина браузера слишком мала.

Источник
Другие вопросы по тегам