在不同的列中显示动态创建的列表 [英] Displaying dynamically created lists in different columns
本文介绍了在不同的列中显示动态创建的列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的站点中有一些供应商列表,这些供应商列表是手动创建的.
I have some list of vendors in my site, those vendors list are created manually.
这些链接显示在一个单独的列中 div
Those links are displaying in one single column 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列中显示此列表.
But i wanted to display this list in 3 columns.
例如,如果我有30个供应商,则每列显示10个供应商.
For example, if i have 30 vendors then show 10 vendors for each column.
推荐答案
you can use CSS columns, like this:
.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;
}
}
<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>
这篇关于在不同的列中显示动态创建的列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文