朝、
状況: CSS3 列を使用して、ピンを注文するためのレスポンシブ列を作成しています。列内の製品は、評価 (ここで確認できるように: http://d.pr/i/iJPK ) によって横方向に並べられます。最初の 3 つが強調表示されます。
問題: CSS3 列はデフォルトで垂直に並べられますが、これを変更するオプションがありません。順序は水平にする必要があるため、最初の 3 つをハイライト表示できます + もう 1 つは水平に配置されます。高さも可変である必要があります (そのため、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;
}
}
}
}