Сделайте размер авто Div в зависимости от элементов - две колонки, одна выровненная по низу

Question

Сделайте размер авто Div в зависимости от элементов - две колонки, одна выровненная по низу

0

Поэтому рассмотрим, что у меня есть две ситуации:

http://jsfiddle.net/CtYYJ/ <---------- первый сценарий

Вот общая ситуация, когда текст в левом div длиннее входных элементов в правом div.

Как я могу указать размер обертки так же, как длина правой части div, и в том же сценарии правые элементы ввода div будут выровнены в нижней части обертки, как в моем первом примере jsfiddle?

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

Как изменить размер обертки в одну строку и отобразить элементы inline с использованием того же стиля CSS, что и для первого сценария?

http://jsfiddle.net/zfGeW/ <---------- второй сценарий

Пожалуйста, дайте мне несколько указателей, потому что я злюсь на случайные попытки с помощью

height: auto;
min-height: 50px;

и другие свойства CSS, которые я нашел в Интернете.

Тем не менее, я заметил, что нет способа иметь правильные элементы ввода div выровненные по низу, без указания фиксированного размера для обертки, нет ли обходного пути для этого и избежать тега table?

Вот онлайн-код двух сценариев, о которых я говорю: пример

Пожалуйста, имейте в виду, что содержимое правого и левого элементов div является переменным, два примера, которые я играю, являются крайними случаями:

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

Lucian Enache 01 окт. 2013, в 14:46

Источник

0

Люциан, твои сценарии немного сбивают с толку. Возможно, добавление графического представления вашего запроса поможет людям ответить на ваши проблемы.
Mihai Alex 01 окт. 2013, в 12:01

Теги:

html

css

stylesheet

2 ответа

0

вы пробовали: высота: 100%?

Anton Lipovskoy 01 окт. 2013, в 10:15

0

конечно, и правильное содержимое div становится неправильно выровненным (попробуйте это на моем примере jsfiddle и посмотрите :))
Lucian Enache 01 окт. 2013, в 12:26

Ещё вопросы

Люциан, твои сценарии немного сбивают с толку. Возможно, добавление графического представления вашего запроса поможет людям ответить на ваши проблемы.
конечно, и правильное содержимое div становится неправильно выровненным (попробуйте это на моем примере jsfiddle и посмотрите :))

Mihai Alex · Accepted Answer · 2013-10-01T10-31-00.000Z

После проверки вашей графики я думаю, что нет способа CSS для того, что вы просите. Будет ли использование метода искусственных столбцов и позиционирование вашего правильного контента, зафиксированного или абсолютно в нижнем углу, решением?

http://alistapart.com/article/fauxcolumns

<div style="width:400px;position:relative;">
    <div style="height: 200px; width:250px;">left</div>
    <div style="height: 50px; width:150px;position: absolute;right: 0; bottom: 0;">right</div>
</div>

http://jsfiddle.net/26V6E/

Да, это может быть решающим для моей ситуации. единственное, что мне пришлось отрегулировать, это «высота: 100%»; или "высота: авто;" для левого div (так как он должен иметь тот же размер, что и содержимое, которое я помещаю внутрь)