在不同列中顯示動態創建的列表

Question

我在我的網站中有一些供應商列表，這些供應商列表是手動創建的。

Live Site

這些鏈接顯示在一個單獨的列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個供應商。

Answer 1

你可以使用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; 
 
    } 
 
}

<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>

Answer 2

嘗試添加：

.vendor-list-item { 
    width: 33%; 
    float: left; 
} 

Answer 3

添加顯示屬性：

.vendor-list-item { 
    display: inline-block; 
    width: 33%; 
} 

對於移動，使用媒體查詢：

@media (max-width: 480px){ 
    .vendor-list-item { 
    width: 100%; 
    text-align: center; 
    } 
} 

您還可以添加一個條件爲片劑（< 767px）在2列（寬度：50％）來顯示。

信息關於媒體查詢：https://developer.mozilla.org/es/docs/CSS/Media_queries

結果