我的网站中有一些供应商列表,这些供应商列表是手动创建的。
这些链接显示在一列div
码
<div class="rte">
<ul class="vendor-list block-grid three-up mobile one-up">
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/{{ product_vendor | handleize }}">
{{ product_vendor }}
</a>
</li>
</ul>
</div>
但我想在3列中显示此列表。
例如,如果我有30个供应商,那么每列显示10个供应商。
答案 0 :(得分:2)
尝试添加:
while (!pool.awaitTermination(60, TimeUnit.SECONDS))
答案 1 :(得分:2)
您可以使用CSS columns,如下所示:
.vendor-list {
-webkit-columns: 3; /* Chrome, Safari, Opera */
-moz-columns: 3; /* Firefox */
columns: 3;
}
@media (max-width: 640px) {
.vendor-list {
-webkit-columns: 1; /* Chrome, Safari, Opera */
-moz-columns: 1; /* Firefox */
columns: 1;
}
}
&#13;
<div class="rte">
<ul class="vendor-list block-grid three-up mobile one-up">
<li class="vendor-list-item" style="font-size: 20px;">
<a href="/collections/accessorizeus-com">accessorizeus.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/betseyjohnson-com">Betseyjohnson.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/bladeandblue-com">bladeandblue.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/chicnova-com">chicnova.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/choies-com">choies.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/footnotesonline-com">footnotesonline.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/forzieri-com">forzieri.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/frenchconnection-com">frenchconnection.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/gaiam-com">gaiam.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/johnstonmurphy-com">Johnstonmurphy.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/kelsidaggerbk-com">kelsidaggerbk.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/lanebryant-com">lanebryant.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/mattandnat-com">mattandnat.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/maykool-com">maykool.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/monicavinader-com">Monicavinader.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/moosejaw-com">moosejaw.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/onlineshoes-com">onlineShoes.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/pinkqueen-com">pinkqueen.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/rebeccataylor-com">rebeccataylor.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/romwe-com">romwe.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/ronherman-com">ronherman.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/rosewe-com">rosewe.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/rotita-com">rotita.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/shabbyapple-com">shabbyapple.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/shein-com">sheIn.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/shoes-com">Shoes.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/swimspot-com">swimspot.com</a>
</li>
<li class="vendor-list-item" style="font-size:20px">
<a href="/collections/toddsnyder-com">Toddsnyder.com</a>
</li>
</ul>
</div>
&#13;
答案 2 :(得分:1)
添加显示属性:
.vendor-list-item {
display: inline-block;
width: 33%;
}
对于移动设备,请使用媒体查询:
@media (max-width: 480px){
.vendor-list-item {
width: 100%;
text-align: center;
}
}
您还可以为平板电脑添加条件(&lt; 767px)以显示2列(宽度:50%)。
有关媒体查询的信息:https://developer.mozilla.org/es/docs/CSS/Media_queries
<强>结果