Высота решетки Проблема между divs?

Я создал систему сетки div с HTML и CSS, используя метод float: left.Высота решетки Проблема между divs?

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

Вот codepen: http://codepen.io/anon/pen/GJZWoX

CSS:

.parent{ 
    width:330px; 
} 

.red{ 
    float:left; 
    width:150px; 
    height:150px; 
    margin-bottom:10px; 
    margin-left:10px; 
    background-color:red; 
} 

.blue{ 
    float:left; 
    width:150px; 
    height:300px; 
    margin-bottom:10px; 
    margin-left:10px; 
    background-color:blue; 
}

Есть ли способ решить эту ошибку, используя только CSS? Любой хороший ответ был бы оценен.

Это то, что я ищу:

enter image description here

Спасибо

источник

2015-05-13 Dinuka

Я читал на Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

Делать это только CSS сделает его очень сложной задачей, есть отличные плагины, которые могут вам помочь. Возможно, вы хотели бы что-то вроде строки ** [masonry.js] (http://masonry.desandro.com/) **, это не мое, но вот отличный ** [пример] (http: // codepen.io/seanmccaffery/pen/Gxtqy)** о том, как работает masonry.js. –

Не с CSS, только с flexbox. См. Мой ответ. @Earthling – JohnDevelops

Просто CSS? С flexbox вы могли бы http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

Но я бы выбрал Javascript как более надежную (и немного лучшую поддержку браузера во время публикации).

с помощью JQuery масонства http://masonry.desandro.com/ (поддерживается IE9 +)

источник

2015-05-13 14:45:32 JohnDevelops

Высота решетки Проблема между divs?

ответ

Смежные вопросы