3

Нужно сделать блок из двух колонок. В левой написано "Описание", а в правой сам текст описания.Не удается выставить ширину в 50% для "Описания". По факту отображается как 15-20%, т.е меньше чем необходимо. Правая колонка с текстом описания,наоборот, занимает гораздо больше оставшихся 50%.

<div class="text_block" style="display:flex;flex-direction:row">
  <p style="width:50%">Описание</p>
  <p>Пуховик из качественного материала. Материал синтетика,мех. Размер xl. Доступен также в других размерах</p>
</div>

2 ответа 2

6

Нужно задать первому абзацу flex-shrink: 0, чтобы он не сжимался:

<div class="text_block" style="display:flex">
  <p style="width: 50%; flex-shrink: 0">Описание</p>
  <p>Пуховик из качественного материала. Материал синтетика,мех. Размер xl. Доступен также в других размерах</p>
</div>

Или обоим абзацам задать width: 50%

<div class="text_block" style="display:flex">
  <p style="width: 50%">Описание</p>
  <p style="width: 50%">Пуховик из качественного материала. Материал синтетика,мех. Размер xl. Доступен также в других размерах</p>
</div>

3
  • А почему сжимается элемент, несмотря на то что ширина установлена для него? 21 дек 2018 в 9:58
  • @ArturHan, потому, что Вы задали ширину только одному абзацу и не задали возможность переноса (flex-wrap: wrap). Во втором абзаце много содержимого, и оно расширяет второй абзац за счёт первого. Вместо flex-shrink: 0 можно было просто обоим абзацам задать width: 50% - результат был бы тот же 21 дек 2018 в 10:07
  • @ArturHan, элемент p по умолчанию является display: block; который имеет width: 100%;.
    – De.Minov
    21 дек 2018 в 10:35
2

А если через column-count? Сам пока активно этим не пользуюсь, комментарии/критика приветствуются

<style>
    .text_block {
      column-count: 2;
    }
    .text_block > p:first-child {
      margin: 0;
    }
</style>


<div class="text_block">
<p>Описание</p><br/>
<p>Пуховик из качественного материала. Материал синтетика,мех. Размер xl. Доступен также в других размерах</p>
</div>

Ваш ответ

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

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