Как адаптировать/изменить элементы когда они налазят друг на друга?

Question

[Onatsky]

Здравствуйте! Есть два элемента изменяющие свою ширину в зависимости от содержания (текст). Один элемент слева, другой справа. Если взять изменить ширину экрана так, чтобы элементы не вмещались, то левый элемент окажется под правым. И от собственно вопрос: как сделать так, чтобы когда эти элементы не вмещались и выстраивались в столбик, то они изменяли свою ширину на всю допустимую им ширину.

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


Помогите решить эту задачку, заранее спасибо! ^_^

Answer 1

[metaf]

Css ничего не знает о вашем и контенте, и стили в зависимости от ширины блока (не путать в вьюпортом) задавать нельзя.
Есть решения на js, например, marcj.github.io/css-element-queries

Answer 2

[Андрей Федоров]

Попробуйте так:
codepen.io/aliencash/pen/ObmVzd

Comments

[Onatsky]

Спасибо! Но вы меня не так поняли, и в этом моя вина. Блоки могут иметь произвольную ширину. Ну или хотя бы один, левый (Там текст). То есть ширина не фиксированная. Она относительная. media с шириной не решит мою задачу.

Answer 3

[indigo_style]

codepen.io/anon/pen/qqmbYb?editors=1100#0

Comments

[Onatsky]

Воо, что-то близкое. Немного не то конечно, но я попробовал немного под свою задачу переделать код. Вот: codepen.io/anon/pen/RoVaPx
Попробуйте уменьшить размер экрана, и вы что когда контент перестанет влезать, то блоки сменят позицию. С левым блоком все хорошо, но от правый блок не увеличивается на 100% ширину.
Можете помочь сделать так, чтобы правый блок имел фиксированную ширину когда элементы находятся в строке, но чтобы он же имел 100% ширину когда находился в столбце. (То есть когда ниже левого блока).

[Onatsky]

indigo_style: Та чего нет, буду, но разве он играет роль?

[indigo_style]

Onatsky: вы получается media не будете пользоваться?

[indigo_style]

Onatsky: перепутал, медиа запросами?

[indigo_style]

Onatsky: если с медиа гляньте пример(изменил)

[Onatsky]

indigo_style: Нет, без медиа. От смотрите, есть два блока. Правый (имя пользователя) и левый (кнопка). Кнопка должна иметь фиксированный размер (к примеру 200px). Блок где должно быть имя пользователя может иметь разную ширину содержимого. При этом текст не переносится (white-space: nowrap;). И нужно было сделать так, чтобы при изменении размера окна, когда блоки перестают быть на одной строчке, а передвигаются в столбик, то левый и правый блок (ну или верхний и нижний) должны автоматически растянутся на всю доступную им ширину. Но немного поизучав flex я все же добился нужно мне результата. Ну почти, на 80-90%. Пришлось отказаться от одной вещи.

[Onatsky]

indigo_style: P.S. И собственно тут медиа не поможет, ибо нужно отталкиваться от содержимого левого блока.

[indigo_style]

Onatsky: скиньте пример которого сейчас добились 80-90%

[Onatsky]

indigo_style: От, смотрите: codepen.io/anon/pen/RoVaPx

[Onatsky]

indigo_style: Остальные 10-20% того что не вышло, это позиция текста. Хотелось чтобы когда блоки были на одной строчке, текст левого блока был text-align: left; А когда блоки на двух строчках, то text-align: center; Как уже этого добиться, я даже не знаю. JS применять не хочется, но потеря не велика, так что пусть уже так будет.)

[indigo_style]

Onatsky: не знаю почему не через медиа, легко можно было с текстом добиться центра и левого края

[Onatsky]

indigo_style: Можно пожалуйста пример?

[Onatsky]

indigo_style: P.S. немного улучшил код. Раньше если продолжать уменьшать ширину экрана, и при этом текст не помещался, то блок уходил из видимости (залазил за экран). Добавил overflow: hidden; Ну и для красоты text-overflow: ellipsis;