5

Можно ли сделать без привлечения JS следующее? Есть два div'a расположенных в ряд, один принимает ширину контента, которая может быть разной при каждой загрузке, второй - резиновый и занимает всю оставшуюся ширину до границы родительского блока. Гугл даёт решения только для случаев, когда размер первого div'a фиксированный.

2 ответа 2

8

Например используя display: flex у родителя, flex: none у первого div'а и flex: 1 у второго div'а:

.parent {
  display: flex;
}

.first {
  flex: none;
}

.second {
  flex: 1;
  background: teal;
}
<div class="parent">
  <div class="first">Текст нефиксированного размера</div>
  <div class="second"></div>
</div>

4
  • Спасибо, работает. А если мне нужно будет расположить несколько таких строк одна под другой? Что-то не получается. 28 янв 2018 в 8:09
  • @АртёмСвистула несколько таких строк одна под другой, это вы блок .parent дублируете? Вроде должно работать
    – diralik
    28 янв 2018 в 8:11
  • А в одном parent'e их разделить никак нельзя? 28 янв 2018 в 8:13
  • @АртёмСвистула думаю можно, но не очень понятно как именно надо, так что думаю лучше задать отдельный вопрос про это
    – diralik
    28 янв 2018 в 8:15
2

Можно так:

.wrapper {
  border: 1px solid #000;
  width: 400px;
  height: 200px;
  display: grid;
  grid-template-columns: min-content minmax(min-content, 1fr);
}

.a {
  border: 1px solid #000;
}
<div class="wrapper">
  <div class="a a1">Какой-то длинный текст</div>
  <div class="a a2">Текст</div>
</div>

Ваш ответ

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

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