CSS3 列水平排序

Question

早上，

情况： 我正在使用 CSS3 Columns 有响应列来订购一些别针。 列中的产品将按等级排序（如您在此处看到的：http://d.pr/i/iJPK）水平排列。前 3 个突出显示。

问题： 默认情况下，CSS3 列垂直排序，我看不到更改此选项的选项。排序需要水平排列，所以我可以突出显示前 3 个 + 其他是水平排列的。高度也需要可变（这就是我使用 css3 列的原因） 现在在 Chrome 中的样子：http://d.pr/i/Vbqq

我的情况： http://jsfiddle.net/VXsAU/43/ 这些物品是垂直订购的，我需要它们水平订购。

接受使用 jquery 的可能解决方法。

这是我的html：

<div id="list_all_burgers">
        <div id="columns">
            <div class="top_3_header"></div>
            <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque. Nam ac elit risus,
                        ac blandit dui. Duis rutrum porta tortor ut convallis.
                        Duis rutrum porta tortor ut convallis.
                    </p>
            </div>
            <div class="top_3_header"></div>
            <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi.
                    </p>
                </div>
            <div class="top_3_header"></div>
                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Nullam eget lectus augue. Donec eu sem sit amet ligula
                        faucibus suscipit. Suspendisse rutrum turpis quis nunc
                        convallis quis aliquam mauris suscipit.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Nullam eget lectus augue. Donec eu sem sit amet ligula
                        faucibus suscipit. Suspendisse rutrum turpis quis nunc
                        convallis quis aliquam mauris suscipit.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque. Nam ac elit risus,
                        ac blandit dui. Duis rutrum porta tortor ut convallis.
                        Duis rutrum porta tortor ut convallis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Nullam eget lectus augue. Donec eu sem sit amet ligula
                        faucibus suscipit. Suspendisse rutrum turpis quis nunc
                        convallis quis aliquam mauris suscipit.
                        Duis rutrum porta tortor ut convallis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Nullam eget lectus augue.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue. Suspendisse id nulla
                        ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue. Suspendisse id nulla
                        ac urna vestibulum mattis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque. Nam ac elit risus,
                        ac blandit dui. Duis rutrum porta tortor ut convallis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue. Suspendisse id nulla
                        ac urna vestibulum mattis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Donec a fermentum nisi. Integer dolor est, commodo ut
                        sagittis vitae, egestas at augue. Suspendisse id nulla
                        ac urna vestibulum mattis.
                    </p>
                </div>

                <div class="pin">
                    <img src="images/burgers/burger_1.png" />
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Sed feugiat consectetur pellentesque. Nam ac elit risus,
                        ac blandit dui. Duis rutrum porta tortor ut convallis.
                    </p>
                </div>
        </div>
    </div>
</div>

这是我的 css：（sass 表示法）

#list_all_burgers{
  margin-top: 9px;
  margin-left: 15%;
  height: 500px;
  //background-color: rgba(yellow, .3);
  overflow: auto;

  #columns{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;

    .top_3_header{
      display: inline-block;
      background: url('../images/list/burger_name_pat.png') repeat-x;
      width: 100%;
      height: 36px;

      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      column-break-inside: avoid;
    }

    .pin{
      display: inline-block;
      background-color: rgba(0,0,0, .05);
      margin-top: -2px;

      -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
      -moz-box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
      box-shadow: inset 0 2px 3px rgba(0,0,0, .4);
      -moz-border-radius: 9px;
      border-radius: 9px;

      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      column-break-inside: avoid;

      img{
        width: 100%;
        padding-bottom: 15px;
        margin-bottom: 5px;
      }
    }
  }
}

Answer 1

找到解决方案（万岁）

Masonry JS 库帮了我大忙。 MasonryJS link

Answer 2

列 CSS 不适合您想要的结果。
您可以查找 display:inline-block 和 text-align:justify。
http://jsfiddle.net/VXsAU/43/

ul.newslist {
    width:98%;
    background-color: #ccc;
    padding: 16px 1% 0;
    list-style: none;
    text-align:justify;
}
ul.newslist:after {/* to justify last line too, add a virtual-one */
    content:'';
    display:inline-block;
    width:100%;
}
ul.newslist > li {
    border-top: 1px solid #000;
    display:inline-block;
    width:21%;
}
ul.newslist > li > a {
    display: block;
    padding: 4px;
    background-color: #f6b;
    text-decoration: none;
    color: inherit;
}

编辑：使用不同的高度：http://jsfiddle.net/GCyrillus/VXsAU/44/