Динамические блоки в контейнере

http://codepen.io/mugukamil/pen/LZxboV

у контейнера выставляешь display: flex;

для проверки удаляй item3 и item2 в HTML

Такой плагин подойдет http://masonry.desandro.com/ ?

Буду пробовать, всем спасибо!))))

---------- Добавлено 25.06.2016 в 05:54 ----------

Это почти решает задачу, в любом случае это новое для меня, за что спасибо.

Не решается одна задача, вот я хочу чтобы например в строку было 4 блока, если появляется 5й, то чтобы он переносился на следующую строку, как это сделать?

Сейчас они все ютятся в один ряд.

    <div class="container">
    
  <div class="item item1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi fugit, officia, dolorum eius eaque facilis excepturi, ea qui omnis deleniti asperiores accusantium cupiditate nesciunt nobis, velit cum sit dolore. Cum minus porro, amet fugiat enim ratione quibusdam libero ab, ducimus iusto autem fuga quod magnam harum. Eum id explicabo animi.
  </div>
  <div class="item item2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab tenetur laborum quos, mollitia magni temporibus et fuga minima voluptatibus quidem, doloribus culpa soluta quia quas ipsa, similique dignissimos vitae. Harum quaerat explicabo eum animi voluptas dicta suscipit adipisci veritatis ad accusamus ab reiciendis temporibus voluptates itaque minus, quia, quam praesentium.
  </div>
  <div class="item item3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab tenetur laborum quos, mollitia magni temporibus et fuga minima voluptatibus quidem, doloribus culpa soluta quia quas ipsa, similique dignissimos vitae. Harum quaerat explicabo eum animi voluptas dicta suscipit adipisci veritatis ad accusamus ab reiciendis temporibus voluptates itaque minus, quia, quam praesentium.
  </div>
  
  
  
  <div class="item item4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab tenetur laborum quos, mollitia magni temporibus et fuga minima voluptatibus quidem, doloribus culpa soluta quia quas ipsa, similique dignissimos vitae. Harum quaerat explicabo eum animi voluptas dicta suscipit adipisci veritatis ad accusamus ab reiciendis temporibus voluptates itaque minus, quia, quam praesentium.
  </div>
  
</div>

.container {
  max-width: 1000px;
  margin: 0 auto;
  background:#E0F4C7;
  display: flex;
}

.item {
  display: inline-block;
  color: white;
}

.item1 {
  background: #000;
}

.item2 {
  background: blue;
}
.item3 {
  background: orange;

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

В нем все можно настроить.

Для контейнера вам нужно указать display: table и table-layout: fixed, для дочерних элементов display: table-cell. Из ограничений - все дочерние элементы будут выстраиваться в один ряд.

Это можно сделать только с помощью скрипта, который будет считать количество блоков и указывать им ширину через класс или атрибут style.

Есть какой простой скрипт?

Не хотелось бы для решения маленькой задачи, подключать огромные скрипты...

Mazletop, обычно такие решения пишутся под конкретный проект.

К упомянутому выше Masonry, последняя версия которого вышла более 2 лет назад, стоит добавить аналог с текущей поддержкой и лучшей гибкостью - Isotope.js.

Если поддержка старых браузеров не нужна, вы можете реализовать подобный функционал посредством CSS Flexbox, более 75% браузеров уже поддерживают данный функционал.

Вы можете использовать и комбинированный вариант Isotope.js для старых браузеров, которые не поддерживаю CSS Flexbox и CSS Flexbox для браузеров, которые поддерживают его, соответственно. Проверить поддержку CSS Flexbox можно с помощью CSS.supports().API.

Если у вас остались вопросы или предложения, можете обращаться в личные сообщения либо Skype (указанный в профиле).

Спасибо) Буду реализоваться в любом случае, будут вопросы буду писать.

Я сейчас в отпуске, как вернусь займусь вопросом.