Question

我有一个像带有多个div的仪表板的布局，当浏览器宽度超过一定宽度时，我希望有两列。 http://jsfiddle.net/p8pts/1/

我正在尝试float:left;并将宽度更改为50％

当屏幕很窄时，它看起来像这样

Narrow Browser Width

当浏览器宽度超过指定宽度时，我希望它看起来像这样

Wide Browser Width

但它实际上是这样的

enter image description here

div都是可变高度。有没有什么我可以做没有复杂的JavaScript来找出定位？最好使用css？

编辑：我见过砌体并且它做了我想做的事情，除了我的一些div用jquery的slideDown方法移动高度所以绝对定位不会起作用。

Answer 1

如果你想要一个纯CSS的砌体布局，你可以使用灵活的盒子布局。

您可以在此处查看所需内容的示例（尝试使窗口更宽/更窄）：http://jsfiddle.net/ds75Q/

这是我用过的所有CSS：

div#masonry {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 900vw;
    font-size: 0;
}
div#masonry img {
    width: 50%;
}

@media screen and (max-width: 500px) {
    div#masonry {
        display: block;
    }
    div#masonry img {
        width: 100%;
    }
}

点击此处查看当前支持：http://caniuse.com/flexbox

这里是W3C规范：http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/

这里有一篇好文章，虽然还有更多：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

<强>更新

如果您不能指定父级height，因为它是可变的，您可以使用CSS列，就像这个小提琴一样：http://jsfiddle.net/j2WZm/1/

对于父级，您可以指定要使用的列数以及它们之间的间隙宽度：

div#masonry {
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    column-count: 2;
    column-gap: 0;
    width: 100%;
}

对于子元素，您可以将display更改为inline-block，即使其高度发生变化，也不会在列之间进行拆分：http://jsfiddle.net/p8pts/14/

div > span {
    display: inline-block;
    width:100%;
}

或者您也可以使用display:block' with the property column-break-inside：避免`以获得相同的效果：jsfiddle.net/p8pts/12

div > span {
    display: block;
    width:100%;
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
}

请注意，子元素的width:100%是指列的100％，而不是父元素。

Answer 2

css还没有好的解决方案。这通常被称为砖石或pinterest布局。使用jquery。

尝试... http://masonry.desandro.com/

或谷歌'砌体布局插件'

如果你绑定到css解决方案，请使用css3列，虽然这不会使div水平流动，因此这与您所需的顺序不匹配：

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

这在IE9中不起作用，所以回到javascript ...

<!--[if lte IE 9]>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<![endif]-->

Answer 3

你希望他们像Pinterest电路板那样堆叠吗？我不确切知道Pinterest是如何做到的，但我记得他们使用了absolute positioning。 CSS可能是可能的，虽然我认为这将是一个牵强附会的解决方案。

为什么要重新发明，请看Masonry。来自网站：

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

主页上的图块与Masonry叠加在一起，它包含一个简短的入门教程。

将所有<div>放入JS for循环就足够了，并为每个div创建一个新的Masonry对象。或者你甚至可以立即从HTML中实例化它，它说。祝你好运。

Answer 4

您是否根据屏幕宽度考虑了条件？然后，您可以根据需要应用CSS。

我在转换常规显示器大小的移动网站并使用CSS条件来实现所需的结果时涉及到一点点。令人惊讶地工作得很好。这样的条件：

@media screen and (min-width: 600px) {

#header ul {
    display: block;
    margin-right: 1.02048%; /* 10/980 */
}
#header form {
    display: none;
}
#footer p {
    display: block;
    line-height: 30px;
    color: #4e4e4e;
    text-align: left;
    float: left;
    width: 16.3265%; /* 160/980 */
    min-width: 120px;
    margin-left: 1.0204%; /* 10/980 */
}

}

@media screen and (min-width: 1000px) {

#header form {
    display: block;
}
#header ul a {
    display: block;
    float: left;
    width: 74px;
}

#header div > a.mobile {
    display: none;
}
}

Answer 5

也许给这一点（我对标记采取了一些自由，所以它可能不是你想要的）：

<div class="left">
    <span class="sm">1</span>
    <span class="med">3</span>
    <span class='lg'>5</span>
</div>

<div class="right">
    <span class='med'>2</span>
    <span class="sm">4</span>
    <span class="lg">6</span>
    <span class="sm">8</span>
</div>

CSS：

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    margin-right: -2px;
}

.right {
    left: 50%;
}

span {
    border: 1px solid blue;
    display: block;
    width: 100%;
}

.lg {
    height: 200px;
}

.med {
    height: 150px;
}

.sm {
    height: 100px;
}

这是一个小提琴：http://jsfiddle.net/p8pts/10/

CSS有没有像浮动一样的东西？

5 个答案: