CSS: плавающий DIV-контент, выходящий за пределы контейнера при использовании min-width. Скорее есть скроллеры - PullRequest
0 голосов
/ 24 февраля 2011

надеюсь, что один из ваших парней узнает ответ на этот вопрос.

У меня есть 2 плавающих DIVS и один контент DIV-контейнеров с минимальной шириной.Когда я изменяю размер окна, а окно меньше содержимого минимальной ширины, содержимое выходит за пределы родительского контейнера.

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

Кто-нибудь знает решение?

<html>
    <style>
        .outer {
            width:100%;
            border:2px solid green;
            position:relative;
        }
        .left {
            float:left;
            width:20%;
            max-width:250px;
            background:red;
        }
        .right {
            float:left;
            width:80%;
            background:#eee;
        }
        .inner {
            min-width:620px;
            border:1px solid blue;
        }
        .clear {
            clear:both;
        }
    </style>
    <div class='outer'>
        <div class='left'>This is an inner content page. This is an inner content page.This is an
            inner content page.This is an inner content page.This is an inner content
            page.This is an inner content page.This is an inner content page.This is
            an inner content page.This is an inner content page.This is an inner content
            page.This is an inner content page.This is an inner content page.</div>
        <div
        class='right'>
            <div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
                inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.This is
                an inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.</div>
            <div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
                inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.This is
                an inner content page.This is an inner content page.This is an inner content
                page.This is an inner content page.This is an inner content page.</div>
    </div>
    <div style='clear:both'></div>
    </div>

Хотел бы, чтобы скроллеры появлялись горизонтально в окне браузера (а не в DIV) при его расширении.

Ответы [ 2 ]

0 голосов
/ 24 февраля 2011

Попробуйте

.outer {
    width:100%;
    border:2px solid green;
    position:relative;
    overflow: scroll;
}
0 голосов
/ 24 февраля 2011

Вы устанавливаете ширину самого верхнего родительского элемента на 100%. Он не будет расти больше, чем его родитель, который в данном случае равен body. Если вы хотите увеличить элемент .outer, вы можете указать фиксированную ширину, http://jsfiddle.net/ETcf2/.

При этом и удаленном min-width всплывающие элементы ведут себя как положено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...