Как сделать увеличение блока до 100% при переносе на другую строку?

Ссылка скопирована
CSS HTML PHP
22 марта 2026 1 ответ

Есть 2 блока с некоторым содержимым, нужно чтобы они располагались в строку, но если для этого требуется ширина каждого из них меньше 300px, один блок переносился на следующую строку, после чего они оба занимали по 100% ширины

<div class="tag-demo-demonstration">                 <div class="tag-showcase">                     <code>                         <div><br>                             <p <span class="blue-html-span">class</span>=<span class="brown-span">"white-text"</span>><br>                                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum                                  dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit.                                  Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>                             </p><br>                             <p <span class="blue-html-span">id</span>=<span class="brown-span">"black-text"</span>><br>                                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum                                  dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit.                                  Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>                             </p><br>                             <p <span class="blue-html-span">class</span>=<span class="brown-span">"white-text"</span>><br>                                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum                                  dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit.                                  Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>                             </p><br>                         </div>                     </code>                 </div>                 <div class="tag-demo">                     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum                                  dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit.                                  Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>                                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum                                  dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit.                                  Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>                                 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum                                  dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit.                                  Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br>                 </div>             </div>

<div class="tag-demo-demonstration"> <div class="tag-showcase"> <code> <div><br> <p <span class="blue-html-span">class</span>=<span class="brown-span">"white-text"</span>><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br> </p><br> <p <span class="blue-html-span">id</span>=<span class="brown-span">"black-text"</span>><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br> </p><br> <p <span class="blue-html-span">class</span>=<span class="brown-span">"white-text"</span>><br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br> </p><br> </div> </code> </div> <div class="tag-demo"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum consequatur sed minima laborum dicta beatae enim libero harum modi eos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, aperiam voluptates. Placeat eveniet impedit veniam. <br> </div> </div>

.tag-demo-demonstration{     min-height: 200px;     margin: 2% 0 2% 0;     width: 100%;     display: flex;     flex-wrap: wrap; } /*tag-showcase*/ .tag-demo-demonstration .tag-showcase{     min-width: 270px;     max-width: 100%;     display: inline-block;     padding: 3%;     background-color: #c2c2c2;     border-radius: 2% 0 0 2%; } .tag-showcase code{     font-size: 18px; } /*tag-demo*/ .tag-demo-demonstration .tag-demo{     min-width: 270px;     max-width: 100%;     display: inline-block;     padding: 3%;     background-color: #dadada;     border-radius: 0 2% 2% 0; }

.tag-demo-demonstration{ min-height: 200px; margin: 2% 0 2% 0; width: 100%; display: flex; flex-wrap: wrap; } /*tag-showcase*/ .tag-demo-demonstration .tag-showcase{ min-width: 270px; max-width: 100%; display: inline-block; padding: 3%; background-color: #c2c2c2; border-radius: 2% 0 0 2%; } .tag-showcase code{ font-size: 18px; } /*tag-demo*/ .tag-demo-demonstration .tag-demo{ min-width: 270px; max-width: 100%; display: inline-block; padding: 3%; background-color: #dadada; border-radius: 0 2% 2% 0; }

Дополнительно:

Для достижения нужного результата, можно использовать остальные свойства flexbox, такие как flex-basis и flex-grow
snippet

  • Спасибо, очень помог! Зато я понял, мне надо получше изучить flexbox
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Мария Код Ответ

Для того чтобы сделать блок увеличивающийся до 100% при переносе на другую строку, можно использовать свойство CSS "word-wrap: break-word;". Это свойство позволяет разрывать длинные слова или строки внутри блока, чтобы они не выходили за его границы.

Пример использования в HTML и CSS:

<div class="block">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Cras euismod, turpis id tincidunt vestibulum, justo mi finibus libero, ac vestibulum elit nisl at justo.
</div>

<div class="block"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Cras euismod, turpis id tincidunt vestibulum, justo mi finibus libero, ac vestibulum elit nisl at justo. </div>

.block {
  width: 200px;
  border: 1px solid #ccc;
  word-wrap: break-word;
}

.block { width: 200px; border: 1px solid #ccc; word-wrap: break-word; }

В данном примере блок будет иметь ширину 200 пикселей и если текст внутри блока не помещается на одной строке, то он будет автоматически перенесен на следующую строку, сохраняя при этом ширину блока до 100%.

Таким образом, использование свойства "word-wrap: break-word;" позволяет создать увеличивающийся до 100% блок при переносе на другую строку.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему не работает связка 3X-UI на своем VPS и Necobox на Windows 10 и где искать причину? 0 ответов