1

Каким образом размер блока задавать пропорционально размеру текста?

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

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

Если width: 100%, то

введите сюда описание изображения

Если ширину убрать вовсе, то получится так:

введите сюда описание изображения

Требуется, чтобы во втором случае первый блок был равен по ширине второму блоку.

2 ответа 2

1

Это можно реализовать следующим образом:

#parent {
  background: lightblue;
  width: 400px;
}

#child {
  background: #3d3d3d;
  width: 100%;
  color: white;
  font-size: 1.2em;
}

#child2 {
  width: 100%;
  background: red;
  color: white;
}
<div id="parent">
  <div id="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin turpis purus, sodales eget ultricies tempus, iaculis vitae dolor. Nullam lobortis urna lacus, quis eleifend est malesuada et. Donec felis justo, elementum nec augue et, aliquet imperdiet augue.
    Nam at tellus eu velit pulvinar mollis. Donec laoreet fermentum justo ac aliquet. Pellentesque neque est, rhoncus faucibus commodo sit amet, lobortis sit amet magna. Aliquam erat volutpat. Nam justo sem, malesuada facilisis massa nec, ornare cursus
    augue. Maecenas dolor nunc, bibendum nec turpis non, aliquam pulvinar massa. Curabitur dapibus venenatis velit, nec luctus odio fermentum et. Nam feugiat odio sed ligula euismod, sed luctus dolor fringilla. Nulla ut odio urna. Nam egestas luctus est.
  </div>
  <br>
  <div id="child2">
    Lorem ipsum dolor sit amet,
  </div>
</div>

0

Выставите родителю display: inline-block; и max-width: 100%;, тогда родитель начнёт растягивать от самого длинного дочернего элемента, а остальные элементы будут принимать длину родителя.

P.s. display: inline-block; сделает родителя строчным элементом, чтобы он не ломал вёрстку, оберните его блочным.

.list {
  display: inline-block;
  width: auto;
  max-width: 100%;
  background: #ccc;
  padding: 5px;
  box-sizing: border-box;
}

.list .item {
  display: block;
  width: 100%;
  background: #eee;
  color: #333;
  height: 24px;
  line-height: 24px;
  padding: 0 5px;
  box-sizing: border-box;
}

.list .item:not(:last-child) {
  margin-bottom: 5px;
}
<div class="list">
  <div class="item">asdasdas</div>
  <div class="item">asdas</div>
  <div class="item">asdasas</div>
  <div class="item">asdas</div>
  <div class="item">asdasddasasdasdasdasd</div>
</div>

3
  • codepen.io/VladislavV/pen/abvEZEE Вот решение, которое работает. Но интегрировать ещё не удалось. За подробное объяснение деталей работы flex-grow и других flex объявлю конкурс и дам 50 голосов. 5 мая 2020 в 9:00
  • @hedgehogues, за это нужно не конкурс объявлять, а документацию читать. На будущее, в вопрос приводите код и более подробно описывайте проблему. Вы ничего не сказали о наличии Flex.
    – De.Minov
    5 мая 2020 в 10:15
  • Это решение, которое мне предложил один разработчик. flex использовать не обязательно. Но так как решение работает, то если Вы его напишите и подробно разберёте, то я объявлю конкурс и отдам Вам 50 баллов. 5 мая 2020 в 10:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.