1

Как задать ширину контейнера равную ширине родителя, не задавая ему явной ширины (px), чтобы родительский контейнер не растягивался по ширине при заполнении.

ДОП:

Родительский контейнер тоже не должен иметь фиксированную ширину, его ширина должна определяться вторым дочерним элементом.

.mob-telephone {
    display: inline-block;
}

/* По этому элементу будет определяться ширина .mob-telephone */
.mob-telephone__number {
    font-weight: bold;
    font-size: 18px;
    white-space: nowrap;
}

/* Этот элемент должен иметь ширину .mob-telephone и не должен иметь возможность влиять на неё, т.е не умещающийся текст должен переноситься на новую строчку самостоятельно без использования <br> 
*/
.mob-telephone__desc {
    padding-top: 5px;
}
<div class="mob-telephone">
    <div class="mob-telephone__number">+7 (831) 123-23-23</div>
    <div class="mob-telephone__desc">Отдел производства металлоизделий</div>
</div>

<p style="font-style: italic;">Вот так дожно это выглядеть:</p>

<div class="mob-telephone">
    <div class="mob-telephone__number">+7 (831) 123-23-23</div>
    <div class="mob-telephone__desc">Отдел производства<br> металлоизделий</div>
</div>

2 ответа 2

1
<style>
.mob-telephone{
    display: inline-table
}
.mob-telephone__desc {
    display: table-caption;
    caption-side: bottom;
    text-align: left;
}
.mob-telephone__number {
    font-weight: bold;
    font-size: 18px;
    white-space: nowrap;
}
</style>

<div class="mob-telephone">
  <div class="mob-telephone__number">+7 (831) 123-23-23</div>
  <div class="mob-telephone__desc">Отдел производства металлоизделий</div>
</div>
2
  • в этом что-то есть, но хотелось бы увидеть вариант на div'ах 10 авг 2018 в 18:17
  • display: table-caption работает так как мне надо, но правильно ли его использовать без таблицы? 10 авг 2018 в 18:21
0
родитель {
width = 500px; /* условно */
}
сынок {
width = 100%; 
}

сынок будет занимать 100% ширины родителя

7
  • Я наверно не ясно написал. Родительский контейнер тоже не должен иметь фиксированную ширину, его ширина должна определяться вторым дочерним элементом. 10 авг 2018 в 17:59
  • просто убрать стиль родителя: 10 авг 2018 в 18:16
  • оставь width = 100% сынку, тогда сынок не будет вылезать за пределы родителя, а родитель расширяться под размеры дочки. 10 авг 2018 в 18:17
  • Он и так не вылезает за пределы родителя. Пробовал. Просто также растягивает родителя. 10 авг 2018 в 18:19
  • тогда я тебя не понял 11 авг 2018 в 10:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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