css column layout issue

Question

У меня динамический макет с колонками, где количество столбцов зависит от ширины окна.

Использование изображения в качестве примера у меня есть поля содержимого, которые пользователь может свернуть. Если бы экран был достаточно широким, было бы 3 колонки.

Теперь, имея меньшее окно, есть только 2 столбца, но когда верхний левый флажок рухнут, поле внизу не следует вверх.

Я пробовал использовать CSS-счетчик CSS, но не могу заставить его работать. В конкретных примерах, если у меня есть счетчик столбцов 2, он помещает 2 поля в правый столбец вместо левого.

Мой пример CSS:

#content{ 
width:100%;; 
height:100%; 
display:inline-block; 
} 
#content div{ 
    border-color:black; 
    border-style:solid; 
    border-width:2px; 
    display:inline-block; 
    width:300px; 

    vertical-align:top; 
} 
#box1{ 
    height:50px; 
} 
#box2{ 
    height:100px; 
} 
#box3{ 
    height:30px; 
} 

Вот простой jsfiddle того, как я пытаюсь это сделать.

http://jsfiddle.net/5cn6ya75/

Есть ли какие-либо CSS свойства элемента HTML структур, что делает это возможным. Пока единственные решения, которые я могу найти, либо требуют, чтобы я имел фиксированное количество столбцов, либо фиксированную высоту в блоках содержимого.

EDIT: В моем поиске ответа я столкнулся с shapeshifter, который, похоже, способен исправить мою проблему, но используя абсолютную позицию, а затем вычисляет смещение к другому элементу. Я по-прежнему очень заинтересован в более чистом CSS-способе создания динамической раскладки x-столбца с переменными размерами-контейнерами (с возможностью разворачивания), где элементы выравнивают верхнюю часть к ближайшему элементу в их столбце.

Answer 1

Ваша проблема заключается в том, что display: inline-block превращает каждый элемент в «строку» в блок с той же высотой, что и наибольший в строке.

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

Answer 2

Я бы рекомендовал вам использовать Masonry.
Его а JavaScript библиотека для каскадных макетов сетки типа yourse. Я использую его как jQuery Plugin, но вы также можете использовать его автономно.

Если вы измените размер главной страницы, вы можете увидеть, как это работает. Кроме того, у вас есть много Options, чтобы настроить его.

---

О Shapeshift:

Я did't знаю о Shapeshift, но мне кажется, что это будет делать свою работу, а также. Я думаю, что это слишком много накладные расходы, из-за Drag & Drop и т. Д.функции не нужны (и если вы не используете JQuery все равно, что приходит сверху)

---

"Simple" CSS:
Callums заявления прав. В CSS3 нет автоматического способа. Вы можете использовать запросы CSS-СМИ, чтобы установить Точки останова, но было бы очень трудной задачей найти правильные точки останова & Ценности (я не думаю, что это стоит времени).

---

Как я уже сказал (и другие парни до слишком) нет никакого чистый и «хорошо» CSS решения и нет CSS энергосистемы еще как хорошо. Лучший способ - использовать библиотеку JavaScript (с JQuery или без нее).

Answer 3

Если я правильно понял вашу проблему, вы можете абсолютно сделать это без javascript, если вы ориентируетесь на современные браузеры. Как и в случае с наиболее сложными макетами, подходящим инструментом для задания является flexbox.

Так вот что я думаю, что вы пытаетесь сделать:

• если видовой экран достаточно широк, выложите все ящики в колонках
• если окна просмотра не достаточно широк, выложите коробки вертикально, упаковка, как много столбцов, необходимых

Если это правильно, суть того, что вам нужно, это

@media any and (max-width:[width]) { 
    #content { 
    display:flex; 
    flex-direction: column; 
    flex-wrap:wrap; 
    } 
} 

Вам не обязательно нужны правила на ребенка коробки, но вы можете манипулировать порядок, в котором они появляются, когда «рушится» другие коробки: например, следующие шаги #div1 к концу

#content div { 
    order:0; 
} 
#div1 { 
    order:1 !important; 
} 

Я обновил ваш fiddle с объявлением display:flex на #content и некоторыми явными размерами для детей; если вы играете с такими размерами, вы должны быть в состоянии понять, как это работает.

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

Answer 4

$(function() { 
 

 
    $('#container').masonry({ 
 
     itemSelector: '.item', 
 
     columnWidth: 70 
 
    }); 
 

 
});

.content{ 
 
width:100%;; 
 
height:100%; 
 
display:inline-block; 
 
} 
 
.content div{ 
 
    border-color:black; 
 
    border-style:solid; 
 
    border-width:2px; 
 
    display:inline-block; 
 
    width:300px; 
 
    vertical-align:top; 
 
    float: left; 
 
    margin: 5px; 
 
} 
 
#box1{ 
 
    height:50px; 
 
} 
 
#box2{ 
 
    height:100px; 
 
} 
 
#box3{ 
 
    height:30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script> 
 

 
<div id="container" class='content'> 
 
    <div class='item' id="box1"></div> 
 
    <div class='item' id="box2"></div> 
 
    <div class='item' id="box3"></div> 
 
</div>

попробовать. Живая Demo, Demo2

Html

<div id="container" class='content'> 
    <div class='item' id="box1"></div> 
    <div class='item' id="box2"></div> 
    <div class='item' id="box3"></div> 
</div> 

CSS

.content{ 
width:100%;; 
height:100%; 
display:inline-block; 
} 
.content div{ 
    border-color:black; 
    border-style:solid; 
    border-width:2px; 
    display:inline-block; 
    width:300px; 
    vertical-align:top; 
    float: left; 
    margin: 5px; 
} 
#box1{ 
    height:50px; 
} 
#box2{ 
    height:100px; 
} 
#box3{ 
    height:30px; 
} 

JS

$(function() { 

    $('#container').masonry({ 
     itemSelector: '.item', 
     columnWidth: 70 
    }); 

}); 

и добавить

JS в голове

http://masonry.desandro.com/masonry.pkgd.min.js

Answer 5

Я не очень понимаю, именно то, что вы после, но если вы установите ширину столбца фиксированной в любом случае вы можете попробовать медиазапросы как так (если вы плывете ваши дивы):

@media(max-width:927px){ 
#content{ 
    width: 608px; 
} 
#content #box2{ 
    float:right; 
} 
} 

http://jsfiddle.net/5cn6ya75/8/