相关疑难解决方法(0)

我正在尝试创建一个不使用Packery或任何JS的pinterest样式的布局。我尝试使用CSS3列，但它们垂直堆叠。

在这里查看小提琴， https://jsfiddle.net/2otpzbgt/1/

column-count: 3;

是我使用过的，卡片显示为1、6、11等。是否可以显示为1、2、3？

我要解决的目的是使用具有动态内容的网格布局，其中图像大小（高度）会变化（类似于pinterest），但是只有在事先知道图像高度的情况下，包装工才能进行布置。当您滚动时，我懒于加载图像并获取卡。

谢谢！

我正试图解决这个问题.

HTML/CSS:

<style type='text/css'>

#content {
    padding: 20px;
    background: #F3F6F7;
}

.inner-box {
    background: #fff;
}

.inner-box .col {
    background:#eee;
    display:block;
    float:left;
    margin:1%;
    padding:20px;
    width:23%;
}

</style>

<div id="content">      
    <div class="inner-box clearfix">
        <div class="col col-1">
            COl1
        </div>
        <div class="col col-2">
            COl2
        </div>
        <div class="col col-3">
            COl3
        </div>
        <div class="col col-4">
          COl4
        </div>

    </div>              
</div>    

我基本上想要一个流畅的4列布局,每列周围有相同的填充位,整个屏幕上的整个范围跨越100%.

上面的代码可以工作,但是一旦我缩放浏览器,右边的第4列将在其余部分下移.