Question

上午，

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

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

我的情况小提琴： http://jsfiddle.net/VXsAU/43/这些物品是垂直订购的，我需要它们在HORIZONTALLY下订购。

接受了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 notation）

#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

列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;
}

编辑：itel不同身高：http://jsfiddle.net/GCyrillus/VXsAU/44/

Answer 2

找到解决方案（欢呼）

Masonry JS库为我做了诀窍。 MasonryJS link

CSS3列水平排序

2 个答案: