Плавающее вертикальное пространство DIV

Я хочу спросить, как делать DIV, плавающие слева, но заполняющие вертикальное пространство DIVs выше. Я нашел здесь решение использовать плагин Masonry JQuery, но я хочу спросить, можно ли это сделать просто через css. Если вы посмотрите на код или jsfiddle ниже, мне нужно будет установить BOX5 по вертикали в BOX2, чтобы не было места. СпасибоПлавающее вертикальное пространство DIV

Пожалуйста см jsfiddle: http://jsfiddle.net/9ahxjzm8/

HTML:

<div class="wrapper"> 
    <div class="box"> 
     BOX1 
     fgwertgege 
     erhehethrtjh 
     sthsrtjhrt 
     rthrthrt 
     ehertuyrtyr 
    </div> 
    <div class="box"> 
     BOX2 
     sadgergwerwert 
     adrfgaeghr 
    </div> 
    <div class="box"> 
     BOX3 
     sefweflj 
     gewrgheher5y 
     tryjrtjhr 
     rthrthrthrthrth 
    </div> 
    <div class="box"> 
     BOX4 
     sgwhej rtjrtjktyt 
     dfgherthrthrt rth rtst 
     ert erterty 
     ertye ryeryewe w ergerge r gertgerg 
    </div> 
    <div class="box"> 
     BOX5 
     agwerheh 
     etherthrtjhr 
     ertherthrthrth 
     ergergyhr 
    </div> 
</div>

CSS:

div.box { 
    width: 500px; 
} 

div.box { 
    width: 30%; 
    background-color:green; 
    float:left; 
    border: 1px solid; 
    margin-left: 5px; 
    word-wrap: break-word; 
}

источник

2014-11-21 Lukáš Ježek

Если вы не знаете высоту своего столбца, вы можете следовать [этому учебнику] (http: //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks) –

Спасибо, но это не то, что мне нужно, я хочу иметь столбцы разной высоты –

Установка высоты или минимальную высоту будет делать это. Просто добавьте строку кода ниже в свой CSS (div.box), и все будет хорошо.

min-height: 100px; /* Adjsut as needed */ 

margin: 0 0 5px 5px; /* Adjsut as needed to keep the spaces uniform */

Нажмите here, чтобы увидеть изменения, которые я сделал с вашим, и это отлично теперь

Радикальный подход: Если добавить строки кода ниже вашего CSS, он всегда будет выравнивать, но это сократит (не показывать) все, что выходит за заданное значение для максимальной высоты.

решения

min-height: 100px; 

max-height: 200px; 

overflow: hidden;

JQuery: Следуйте по ссылке ниже для хорошо написан учебник по CSS трюков

Equal Height Blocks in Rows

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

источник

2014-11-21 20:13:43

Спасибо, очень близко к на что я хочу выглядеть. Я сделал это, как вы рекомендуете, но если вы посмотрите на http://jsfiddle.net/9ahxjzm8/3/, вы увидите, что вертикальное пространство между BOX2 и BOX5 больше, чем пространство между BOX3 и BOX4. –

Вы сделали минимальную высоту: 1px. Всегда делайте значение минимальной высоты немного выше, чем размер самой высокой коробки, и вы будете в порядке. http://jsfiddle.net/9ahxjzm8/4/ –

И когда я попытался сделать содержимое BOX1 короче, он сделал большое пространство между BOX1 и BOX5 (см. Http://jsfiddle.net/9ahxjzm8/5/), поэтому Я не уверен, что настройка min-height - это решение. То же самое не было правильным результатом, когда я попытался удалить float влево и использовать встроенный блок. Ну, может быть, на самом деле нет простого решения, и мне придется использовать Masonry JQuery. Если у вас есть больше идей, спасибо заблаговременно. –

В настоящий момент вы не устанавливаете явную высоту для div .box, поэтому их высота в настоящее время зависит от содержимого внутри. Если вам не требуется какое-либо пространство между ними, вам нужно либо установить то же самое height, либо то же самое min-height для .box

источник

2014-11-21 20:19:19

Плавающее вертикальное пространство DIV

ответ

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