Два перекрытия div с переменной высотой = без высоты на контейнере

Достаточно легко сделать два перекрытия div, когда размер контейнера div известен, но что делать, если div Heigh не может?Два перекрытия div с переменной высотой = без высоты на контейнере

Я пытался сделать это без манипулирования высоты контейнера: http://jsfiddle.net/AJfAV/ Но #text2#text3 переходят и не «подтолкнуть» его. Как можно изменить размер #container?

мне удалось достичь своей цели с помощью Jquery UI, но я считаю, что это не элегантное решение: http://jsfiddle.net/AJfAV/6/

источник

2013-05-09 user1707414

это проблема, если #container имеет фиксированную ширину ?? –

Является ли это то, что вам нужно?

Updated fiddle:

Я устанавливаю height по умолчанию, auto, используя JQuery, как это:

$("#container").css("height", "auto");

Вы также можете установить: height: auto; в CSS.

источник

2013-05-09 15:44:49 flavian

Не работает. По крайней мере, я ожидал. – user1707414

Я добавил решение, чтобы точно показать, чего я ожидал, но я удивлен, что высота контейнера должна быть исправлена http://jsfiddle.net/AJfAV/5/. В вашем решении/скрипке «text3: Это должно появиться ниже text1 и text2» не отображается ниже text1. – user1707414

Вам нужна позиция: абсолютная? Вы можете использовать абсолютное позиционирование, если вы не хотите делать какие-либо договоренности, но место размещения. Абсолютное позиционирование полностью выводит элемент из потока элементов. Они ничего не знают о его существовании.

Вы можете использовать поплавки и технику для прикрытия поплавков. Я использую ясно:

.cl-left { 
    clear: left; 
    height: .1px; 
    font-size: 0; 
    line-height: 0; 
}

Не забудьте добавить <div class="cl-left"> </div>.

Кроме того, используется отрицательный запас. Поэтому # text2 прибивается справа.

http://jsfiddle.net/AJfAV/7/

источник

2013-05-09 19:26:58 Salomonder

Действительно, мне не нужно абсолютное. Я хотел бы сохранить поток элементов, как они есть, но я не могу найти решение без позиции: абсолютное. – user1707414

Вы можете использовать поплавки, но css-таблицы не будут работать, потому что замирание влияет на свойство отображения. Кроме того, поля не применимы к ячейкам таблицы. – Salomonder

Я неправильно понял? – Salomonder

это может быть решена, если вы удалили абсолютное позиционирование #text1 и #text2.

и сделать #text2 перекрытия #text1 делая как float:left и установить margin-left:-30px для #text2.

теперь давайте протестируем его http://jsfiddle.net/RPe4H/

сейчас проблема в том, что, когда #text1 переключается, #text2 будет плавать в левом верхнем углу #container, это происходит потому, что JQuery установить display:none на элемент, когда переключая делается.

теперь решить эту проблему, поставить # TEXT1 и # text2 внутри контейнеров с такой же ширины, так #text не влияет на поток, когда он установлен в display:none, также необходимо установить min-height:1px на контейнере #text1.

теперь работает, как ожидалось http://jsfiddle.net/MyyF6/1/

источник

2013-05-09 22:45:04

Два перекрытия div с переменной высотой = без высоты на контейнере

ответ

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