Позиционирование divs - CSS

Я пытался поиграть с HTML и CSS.Позиционирование divs - CSS

Мои divs должны быть расположены отличными от того, что я упоминал ниже.

<!doctype> 
<html> 
<head> 
<style> 
div{ 
    float:left; 
    background-color:green; 
    width:10px; 
    margin:1px; 
} 
body{ 
    width:50px; 
} 
</style> 
<body> 
<div style="height:20px"></div> 
<div style="height:30px"></div> 
<div style="height:40px"></div> 
<div style="height:35px"></div> 
<div style="height:55px;background-color:red"></div> 
</body> 
</html>

Я хочу красную коробку и любые новые коробки если это необходимо, чтобы быть оказаны также быть оказаны во втором ряду, начиная слева, чуть ниже соответствующих первых элементов строк. (С удельным поля между элементами)

условия:

Ширина прямоугольника всегда то же самое; только высота отличается.

Предполагая, что в моем примере jsfiddle с заданной шириной только 4 элемента могут занимать ряд. поэтому, 5-й элемент должен автоматически начинаться со следующей строки и соответственно располагаться ниже элементов первой строки.

Я хочу что-то вроде этого.

enter image description here

Может кто-нибудь, пожалуйста, помогите мне решить эту проблему.

Спасибо заранее,

Sudharsanam.N

источник

2013-07-08 sudharsanam

Если вы хотите получить «pinterest-like» эффект для ваших divs вам нужен javascript, проверьте этот jQ uery плагин: http://masonry.desandro.com/index.html

Надеется, что это помогает

источник

2013-07-08 09:40:28 Mangiucugna

Точно, за то, что я искал для Спасибо большое! – sudharsanam

добро пожаловать, если хотите, пожалуйста, сообщите мне мой ответ как правильный. спасибо – Mangiucugna

Добавить clear:left в DIV, где вам нужно добавить перерыв

div:nth-child(5){ 
    clear:left 
}

DEMO

источник

2013-07-08 09:26:16 Sowmya

Благодарим за немедленный ответ; Но я не хочу этого. Я хочу, чтобы красный элемент сразу отображался ниже первого элемента первой строки (скажем, 0.5px вниз или даже 0px вниз должно быть хорошо). Извините за то, что я не очень четко задал вопрос на первом месте. – sudharsanam

Что происходит, он попадает под самый большой элемент. Я не хочу, чтобы это произошло. Я хочу, чтобы это было позиционировано соответственно !!! – sudharsanam

Вам нужно использовать кладку для этого \ – Sowmya

Используйте дисплей встроенного блока вместо поплавка слева:

div{ 
    display:inline-block; 
    background-color:green; 
    width:10px; 
    margin:1px; 
    vertical-align:top; 
} 
body{ 
    width:60px; 
}

Demo

Я думаю, вы должны использовать JS, чтобы точно получить то, что вы хотите.

источник

2013-07-08 09:42:37 Codophage

Позиционирование divs - CSS

ответ

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