Как я могу ограничить ширину абсолютно позиционированного вложенного div? - PullRequest
Новая
       4

Как я могу ограничить ширину абсолютно позиционированного вложенного div?

1 голос
/ 04 марта 2010

У меня сложное многоуровневое меню. (Абсолютно позиционированные) правые пункты меню выпадают из (абсолютно позиционированного) контейнера в IE и Opera, но не в Firefox (или Chrome или Safari); Я подозреваю, что Firefox не прав, потому что я не понимаю, почему абсолютно позиционированный элемент должен иметь размеры, ограниченные абсолютно позиционированным предком. Однако я пытаюсь достичь эффекта Firefox.

Мои ограничения: я знаю ширину .outer; однако я не знаю содержимого (и, следовательно, ширины) какого-либо из промежутков, которые должны определять ширину .middle. Я не знаю содержимого (и, следовательно, ширины) любого из .inner элементов div, однако их ширина не должна влиять на ширину родительского элемента .middle. Левый край .inner должен совпадать с левым краем его промежутка. То есть это двухуровневое меню, в соответствии с которым 2-й уровень должен быть ограничен границей предка, но на каждый элемент первого уровня не должна влиять ширина его дочернего меню.

Какие изменения мне нужно внести, чтобы ограничить внутренний div границами внешнего div в IE? Смотрите упрощенную версию кода ниже. В исходной разметке .outer был ul, а .middle был li. 

<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .outer{
            border: solid 1px black;
            width: 200px;
            position: absolute;
        }
        .outer div
        {
        border: solid 1px green;
            float: left;
        }
        .inner
        {
            position: absolute;
        }
        .inner p
        {
            border: solid 1px red;
        }
        span{
            display: block;
            padding: 0 10px;
        }
        .hide
        {
            display: none;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="middle">
            <span>outer</span>
            <div class="hide"><p>lots and lots of inner text</p></div>
        </div>
        <div class="middle">
            <span>outer</span>
            <div class="hide"><p>lots and lots of inner text</p></div>
        </div>
        <div class="middle">
            <span>outer</span>
            <div class="inner"><p>lots and lots of inner text</p></div>
        </div>
    </div>
</body>

Ответы [ 3 ]

1 голос
/ 04 марта 2010

Вы можете сделать это, установив .inner в position: relative. Из вашего примера кода не очевидно, почему вы в первую очередь выбрали absolute, но любое ручное позиционирование, которое вы хотите сделать, должно быть достигнуто с помощью relative. Вместо установки свойств top, right, bottom или left относительно источника его содержащего блока, установите их относительно того места, где .inner обычно располагается в потоке.

Надеюсь, это поможет!

0 голосов
/ 05 марта 2010

Я нашел частичное решение, применяя положение относительно .middle. Это должно быть применено к IE. К сожалению, это мешает заполнению, но, надеюсь, это будет небольшая проблема, которую нужно исправить. В этой версии используются правильные элементы, а не просто div. 

<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .outer{
            border: solid 1px black;
            position: absolute;
            width: 200px;
        }
        .inner
        {
            position: absolute;
            width: auto;
        }
        .middle
        {
            border: solid 1px green;
            float: left;
        }
        .inner *
        {
            border: solid 1px red;
        }
        span{
            display: block;
        }
        .hide
        {
            display: none;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            .middle{
                position: relative;
            }
        </style>
    <![endif]-->
</head>
<body>
    <ul class="outer">
        <li class="middle">
            <span>outer</span>
            <ul class="hide"><li>lots and lots of inner text</li></ul>
        </li>
        <li class="middle">
            <span>outer</span>
            <ul class="hide"><li>lots and lots of inner text</li></ul>
        </li>
        <li class="middle">
            <span>outer</span>
            <ul class="inner"><li>lots and lots of inner text</li></ul>
        </li>
    </ul>
</body>
0 голосов
/ 04 марта 2010

Я думаю, что на самом деле Firefox правильный, но я не эксперт по CSS. В соответствии с w3schools , реализация по умолчанию должна позволять отображать содержимое вне контейнера, если оно слишком широкое для него.

Это зависит от того, что вы хотите от переполненного контента. Вы пытались установить свойство overflow CSS на своих внешних DIVs? Или установить width на внутренних DIVs?

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

Нет похожих вопросов

...