Отделение не перемещает соседние отделения

Question

Отделение не перемещает соседние отделения

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

<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

добавлено 09 Январь 2013 в 06:08 автор ojek отредактировано 09 Январь 2013 в 06:24

Просмотры: 3

источник

nl ja de

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

добавлено 09 Январь 2013 в 06:13, автор j08691, источник

I' m не совсем уверенный, что вы имеете в виду. Вы подразумеваете, что хотите равную высоту для #left и #right колонки?

добавлено 09 Январь 2013 в 06:11, автор Sven Bieder, источник

4 ответы

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Это - простая кажущаяся проблема, которая заканчивает тем, что была довольно хитра. Вышеупомянутое предложение о 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

добавлено 09 Январь 2013 в 09:00 автор lostphilosopher

источник

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

Мини-курс по Angular и NgRx

16 видео-уроков

автор Rich Adams · Answer 1 · 2013-01-09T06:15Z

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

.bottom {
    clear: both;
}

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

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

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

1

добавлено 09 Январь 2013 в 06:15 автор Rich Adams

источник

Да, но прежде, правый столбец зафиксировал ширину, в то время как оставлено, у каждого была остальная часть пространства. Теперь вы сделали его 50/50 и мной потребность правильная, чтобы быть зафиксированной шириной.

добавлено 09 Январь 2013 в 06:21, автор ojek, источник

@pjp: Нет не действительно. Когда я изменяю ширину правого столбца к 250 пкс и затем устанавливаю оставленную ширину в 100%, это терпит крах.

добавлено 09 Январь 2013 в 06:25, автор ojek, источник

@pjp: Но как я делаю это? Вы говорите мне помещать что-то как правильная ширина 150 пкс и оставленная ширина ~70%? Я don' t как он этот путь, потому что я должен буду предположить, какой процент я должен поместить. И что, если моя ширина отделения родителей изменится? Что тогда?

добавлено 09 Январь 2013 в 06:36, автор ojek, источник

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

добавлено 09 Январь 2013 в 06:23, автор Praveen Puglia, источник

вы наклоняетесь, логически делают это правильно? вы просите, чтобы один ребенок взял все родителя и затем даете 250 пкс другому ребенку. Это разобьет право! То, что я имел в виду, было вами, может применить любую ширину, которая логически соответствует обоим отделения в контейнере. т.е. общая ширина тех двух отделений не должна превышать parent' s ширина.

добавлено 09 Январь 2013 в 06:32, автор Praveen Puglia, источник

посмотрите, что необходимо выбрать одну вещь, и каждый думает только. если вы используете процент, необходимо будет вычислить его для обоих детские отделения и обратиться к ним, вы наклоняетесь, применяют процент к одному и пиксельные значения к другому. это - плохая практика, и она потерпит крах. Попробуйте после объединенной энергосистемы. если вы хотите, чтобы отделения были жидки, используйте процент для обоих. если вы хотите зафиксировать правильное отделение так или иначе и отдых пространства для левых один, затем использовать , переполнение peoperty. установило его скрытый ;

добавлено 09 Январь 2013 в 06:40, автор Praveen Puglia, источник

автор Praveen Puglia · Answer 2 · 2013-01-09T06:19Z

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

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

автор Shashi · Answer 3 · 2013-01-09T06:55Z

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