Div не перемещается рядом с div

У меня есть что-то вроде этого:

<div class="top">top</div>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="bottom">bottom</div>

Соответствующий код в jsFiddle

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

Как я могу это сделать?


containers html css jsfiddle
person ojek    schedule 09.01.2013    source источник
comment
Я не совсем уверен, что вы имеете в виду. Вы имеете в виду, что вам нужна одинаковая высота для столбцов #left и #right?   -  person Sven Bieder    schedule 09.01.2013
comment
Ваши левый и правый div расположены абсолютно, что выводит их из потока документа, поэтому нижний элемент не может сказать, где они находятся.   -  person j08691    schedule 09.01.2013

Ответы (4)


arrow_upward
1
arrow_downward

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

.left {
    height: 100%;
    min-height: 50px;
    border:1px dashed red;
    padding-right: 50px;      <---
}

Затем поместите свой правый div в пространство, которое вы сделали:

.right {
    float:right;              <---
    width: 50px;              (This needs to match the padding-right value above.)
    text-align: right;
    min-height: 50px;
    height: 100%;
    border:1px dashed blue;
}

Наконец, поместите правый div перед левым div в html:

<div class="top">top</div>
<div class="container">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="bottom">bottom</div>

(Проверено в Chrome и IE.)

См.: Правая ширина исправления div, левый div расширяется до максимума ширина?

Вы можете проверить скрипку здесь: http://jsfiddle.net/x3QfG/1/

Будет ли это работать для вас?

person lostphilosopher    schedule 09.01.2013

arrow_upward
1
arrow_downward

Прямо сейчас вы используете абсолютные позиции для левого/правого div, поэтому вам всегда нужно знать высоту, чтобы правильно расположить нижний div. Вместо этого вы хотите поплавать, а затем очистить поплавки в нижнем div. Таким образом, левый/правый элементы могут быть такими же высокими, как и их содержимое, а нижний элемент div всегда будет отображаться ниже.

.bottom {
    clear: both;
}

.left {
    float: left;
    width: 50%;
    min-height: 50px;
}

.right {
    float: right;
    width: 50%;
    min-height: 150px;
}

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

person Rich Adams    schedule 09.01.2013
comment
Да, но раньше у правого столбца была фиксированная ширина, а у левого — остальное пространство. Теперь вы сделали это 50/50, и мне нужно правильное изображение с фиксированной шириной. - person ojek; 09.01.2013
comment
вы всегда можете изменить ширину и установить ее так, как хотите ... и спасибо @Rich за скрипку. - person Praveen Puglia; 09.01.2013
comment
@pjp: Нет, не совсем. Когда я изменяю ширину правого столбца на 250 пикселей, а затем устанавливаю ширину левого на 100%, он вылетает. - person ojek; 09.01.2013
comment
вы не можете логически сделать это правильно? вы просите одного ребенка взять все от родителя, а затем даете 250px другому ребенку. Точно рухнет! Я имел в виду, что вы можете применить любую ширину, которая логически соответствует обоим элементам div внутри контейнера. то есть общая ширина этих двух div не должна превышать ширину родителя. - person Praveen Puglia; 09.01.2013
comment
@pjp: Но как мне это сделать? Вы говорите мне поставить что-то вроде правой ширины 150 пикселей и левой ширины ~ 70%? Мне это не нравится, потому что мне нужно будет угадать, какой процент я должен поставить. А что, если ширина div моих родителей изменится? Что тогда? - person ojek; 09.01.2013
comment
видите, вы должны решить одну вещь и думать только об одном. если вы используете процент, вам придется вычислить его для обоих дочерних элементов div и применить к ним, вы не можете применить проценты к одному и значения пикселей к другому. это плохая практика, и она потерпит крах. Попробуйте следовать системе сетки. если вы хотите, чтобы элементы div были плавными, используйте проценты для обоих. если вы все равно хотите иметь фиксированный правый div и оставшееся пространство для левого, тогда используйте overflow peoperty. установите его на hidden; - person Praveen Puglia; 09.01.2013

arrow_upward
0
arrow_downward

Используйте floats, а не позиционируйте их абсолютно. Это сделает вашу архитектуру очень плавной и гибкой.

После того, как вы примените необходимые значения float к своим .left и .right, используйте хак clearfix, чтобы содержать плавающие элементы внутри контейнера. Теперь всякий раз, когда любой из элементов div .left или .right увеличивается в высоту, нижний элемент div будет смещаться вниз.

person Praveen Puglia    schedule 09.01.2013

arrow_upward
0
arrow_downward

Сделайте контейнер относительным, а левое и правое — абсолютными, а для позиционирования задайте ширину, а не используйте float.

person Shashi    schedule 09.01.2013