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 you have read our privacy policy.

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