top</div> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> <div"> top</div> <div class="container"> <div class="left">left</div> <div class="right">right</div> </div> <div"> top</div> <div class="container"> <div class="left">left</div> <div class="right">right</div> </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>

Relevant code in jsFiddle

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

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

0
nl ja de
Ваши левые и правые отделения помещены абсолютно, который вынимает их из потока документа, таким образом, у нижнего элемента нет способа сказать, где они.
добавлено автор j08691, источник
I' m не совсем уверенный, что вы имеете в виду. Вы подразумеваете, что хотите равную высоту для #left и #right колонки?
добавлено автор Sven Bieder, источник

4 ответы

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

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

Тогда пустите в ход свое правильное отделение в космосе, который вы сделали:

.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;
}

Наконец, поместите правильное отделение перед покинутым отделением в 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>

(Проверенный в хроме и IE.)

See: Right div fix width, left div extend to max width?

You can check out a fiddle here: http://jsfiddle.net/x3QfG/1/

Это будет работать на вас?

1
добавлено

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

.bottom {
    clear: both;
}

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

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

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

1
добавлено
Да, но прежде, правый столбец зафиксировал ширину, в то время как оставлено, у каждого была остальная часть пространства. Теперь вы сделали его 50/50 и мной потребность правильная, чтобы быть зафиксированной шириной.
добавлено автор ojek, источник
@pjp: Нет не действительно. Когда я изменяю ширину правого столбца к 250 пкс и затем устанавливаю оставленную ширину в 100%, это терпит крах.
добавлено автор ojek, источник
@pjp: Но как я делаю это? Вы говорите мне помещать что-то как правильная ширина 150 пкс и оставленная ширина ~70%? Я don' t как он этот путь, потому что я должен буду предположить, какой процент я должен поместить. И что, если моя ширина отделения родителей изменится? Что тогда?
добавлено автор ojek, источник
можно всегда изменять ширину и устанавливать ее в то, что вы хотите.. и спасибо @Rich для скрипки.
добавлено автор Praveen Puglia, источник
вы наклоняетесь, логически делают это правильно? вы просите, чтобы один ребенок взял все родителя и затем даете 250 пкс другому ребенку. Это разобьет право! То, что я имел в виду, было вами, может применить любую ширину, которая логически соответствует обоим отделения в контейнере. т.е. общая ширина тех двух отделений не должна превышать parent' s ширина.
добавлено автор Praveen Puglia, источник
посмотрите, что необходимо выбрать одну вещь, и каждый думает только. если вы используете процент, необходимо будет вычислить его для обоих детские отделения и обратиться к ним, вы наклоняетесь, применяют процент к одному и пиксельные значения к другому. это - плохая практика, и она потерпит крах. Попробуйте после объединенной энергосистемы. если вы хотите, чтобы отделения были жидки, используйте процент для обоих. если вы хотите зафиксировать правильное отделение так или иначе и отдых пространства для левых один, затем использовать , переполнение peoperty. установило его скрытый ;
добавлено автор Praveen Puglia, источник

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

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

0
добавлено

Сделайте Контейнерный Относительный и левый и правый абсолют, и для расположения ширины набора вместо того, чтобы использовать плавание.

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)