Как установить ширину div чтобы div которые находятся внутри не выходили за рамки этой ширины?

Question

[Владимир Муковоз]

Как это выглядит сейчас и что хочу сделать

Как это выглядит в инструментах разработчика хром

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

Answer 1

[Евгений Вольф]

Как установить ширину div чтобы div которые находятся внутри не выходили за рамки этой ширины?

Думаю, вот это ответ на Ваш вопрос. В данном конкретном случае, Вам нужен последний CSS-блок (строки 18-20).

Comments

[Владимир Муковоз]

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

[Евгений Вольф]

Владимир Муковоз, я правильно Вас понял, что DIV в красной рамке (на картинке) должен быть под тем, что слева от него?

[Владимир Муковоз]

Евгений Вольф, правильно.

[Владимир Муковоз]

Евгений Вольф, вот так

[Евгений Вольф]

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

[Владимир Муковоз]

Евгений Вольф, https://new.itcinema.ru/kozni-poslednijj-sjuzhet-p...

[Евгений Вольф]

Владимир Муковоз, ага, первое что стоит добавить, как мне видится:

@media screen and (min-width: 890px)
.wrapper aside {
    flex-wrap: wrap;
}

Без этого все блоки будут впихиваться в одну строку, при display: flex;.

[Евгений Вольф]

Владимир Муковоз, наверное не очень "ровно" написал... там CSS cжатый, криво скопировалось :) Но, надеюсь смысл понятен.

[Владимир Муковоз]

Евгений Вольф, Спасибо)

[Евгений Вольф]

Владимир Муковоз, не за что! / Помогло? :)

[Владимир Муковоз]

Евгений Вольф, ну если перейдёшь по ссылке увидишь что ещё не совсем, но основная проблема которую я не знал как победить решена)

[Евгений Вольф]

Можно попробовать вот так сделать + добавить вложенным элементам margin-rignt нужный (его я не указывал):

[Евгений Вольф]

Скриншот как-то не удачно вписался...

Я вписал в стили ASIDE'a:

flex-direction: column;
justify-content: flex-start;

[Владимир Муковоз]

Евгений Вольф, ну вроде всё получилось)

[Евгений Вольф]

Владимир Муковоз, отлично! :D

[Владимир Муковоз]

Евгений Вольф, фрилансишь? Напиши мне в личку, контакты указаны в профиле. Бывают шабашки, и прям сейчас намечается одна, могу слить. На неё правда есть уже один желающий, но я покажу и тебя и его, а там заказчик сам решит кого выбирать по цене и портфолио)

[Евгений Вольф]

Владимир Муковоз,

фрилансишь?

к сожалению (или счастью) уже давно этим не занимаюсь. Работаю руководителем отдела разработки одной компании :)

С портфолио всё ещё хуже, никогда его не собирал :)))

[Владимир Муковоз]

Евгений Вольф, неожиданный для меня ответ)

Answer 2

[SVM]

overflow

Comments

[Владимир Муковоз]

Это совсем не то или я не понял как это применить в данном случае.

[SVM]

тагды для блока
display:fixed; или display:absolute;
ну и задать нужные координаты (от левого верхнего угла,
типа
left:0;
top:0;
htmlbook.ru/css/bottom

[Владимир Муковоз]

sotvm, да я уже разобрался, но и это не подойдёт. Блоки с одинаковыми классами, в этом случае они наложатся друг на друга.

[SVM]

Владимир Муковоз,
кто заставляет присваивать одинаковые классы блокам,
там где это не нужно ?

[Владимир Муковоз]

sotvm, вордресс. Одинаковые классы там нужны, это галерея. Мне уже подсказали хороший вариант реализации. Прочитай в решении если интересно.

[SVM]

да уже прочитал,
а способов ,как это можно реализовать ,не один и не два ㋛

[Владимир Муковоз]

sotvm, согласен, просто этот в данном случае намного удобнее.