1

Есть контейнер, содержащий шесть потомков, необходимо, чтобы потомки заполняли всю ширину контейнера, при этом ширина самих контейнеров должна зависеть от содержимого (если сделать их равными, содержимое некоторых ячеек будет выходить за границы).
Или же, как минимум нужно сделать, чтобы первый и последний потомки были прижаты к левой и правой границам контейнера соответственно.
Уважаемые коллеги, не подскажете ли метод решения подобной задачи без таблиц?

7
  • А контейнер резиновый? 29 фев 2012 в 7:40
  • Конкретно в этом случае - нет.
    – velther
    29 фев 2012 в 7:41
  • Тогда вроде ни как, т. к. или контейнер должен быть резиновым, или потомки фиксированными. 29 фев 2012 в 7:43
  • а если контейнер резиновый, как вы предлагаете это сделать?
    – velther
    29 фев 2012 в 7:48
  • Просто расположить их как вам надо, и сделать ширину и высоту на auto 29 фев 2012 в 7:53

2 ответа 2

1

Здесь может помочь display:flex у контейнера.
Если у контейнера задано свойство display:flex, то ширина внутренних блоков рассчитывается по ширине их содержимого. Чтобы последний элемент растянулся по всей оставшейся ширине необходимо для него использовать свойство: flex-grow:1

Хорошее руководство по flex

div {
  border: 1px solid red;
}

div div{
  border: 1px solid green;
}

div.main{
  display: flex;
}

div.last {
  flex-grow: 1;
}
<div class="main">
  <div>first</div>
  <div>second with text</div>
  <div>third with long loong long loong long loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loonglong loong next</div>
  <div>fourth el</div>
  <div>fif</div>
  <div>six</div>
</div>  
<hr />
<div class="main">
  <div>first</div>
  <div>second with text</div>
  <div>third </div>
  <div>fourth el</div>
  <div>fif</div>
  <div class="last">six</div>
</div>  

0

Ну так и было задуманно, а если хотите можете посмотреть тут http://habrahabr.ru/blogs/jquery/137436/ , там вроде есть то,что вам нужно про jQuery Masonry

Ваш ответ

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

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