#html #css #flexbox #css-grid
#HTML #CSS #flexbox #css-сетка
Вопрос:
У меня есть клиент, который хочет обернуть 2-ю коробку в дисплей flexbox вокруг нижней части первой, чтобы сэкономить место.
Вот как выглядит дисплей в данный момент: 
И вот как они хотят, чтобы это выглядело: 
Вот пример нашего CSS:
.container { border: 6px solid black; box-shadow: 0 0 5px 0 black; padding: 20px !important; display: flex; flex-wrap: wrap; margin: 0 -15px; font-family: inherit; background-color: white; box-sizing: border-box; } .box-1, .box-2 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; position: relative; } Возможен ли вообще этот запрос?
РЕДАКТИРОВАТЬ: Вот изображение того, о чем я говорю.
Изображение находится в одном поле, а заголовок, описание и кнопка-в другом. Клиент хочет, чтобы описание начиналось слева вверху и шло под изображением, как только оно опустится ниже.
Комментарии:
1. Гибкий трубопровод и сетка предназначены для квадратных / прямоугольных областей. Для желаемого макета потребуется много CSS и/или JavaScript. Более глубокое знание общей компоновки может помочь найти альтернативное решение.
2. @MichaelBenjamin Спасибо за вашу помощь. Я отредактировал сообщение, чтобы включить изображение того, о чем я говорю. Я думаю, мне просто нужно будет сказать клиенту, что это нереально.
Ответ №1:
Вероятно, вам нужно сделать так, чтобы блок 1 плавал слева от блока 2.
Вы можете настроить отступы и поля по мере необходимости.
.block0 { border: solid 5px darkpurple; } .block1 { border: solid 5px green; } .block2 { border: solid 5px purple; } .block1 { float: left; display: block; width: 50%; } lt;div class="block0"gt; lt;div class="block1"gt;1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 lt;/divgt; lt;div class="block2"gt;2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 lt;/divgt; lt;/divgt;