Anzeigen von dynamisch erstellten Listen in verschiedenen Spalten

Question

Ich habe eine Liste von Anbietern in meiner Website, diese Anbieter Liste werden manuell erstellt.

Live Site

Diese Links sind in einer einzigen Spalte angezeigt wird div

Code

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

Aber ich wollte diese Liste in drei Spalten angezeigt werden soll.

Zum Beispiel, wenn ich 30 Anbieter habe dann zeigen Sie 10 Anbieter für jede Spalte.

Answer 1

Sie CSS columns, wie diese verwenden:

.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

Versuchen hinzuzufügen:

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

Answer 3

hinzufügen Anzeige Eigenschaft:

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

Für mobile verwenden Medien fragt:

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

Sie auch eine Bedingung für Tabletten (< 767px) zeigen in zwei Spalten (50% Breite) hinzufügen könnte.

Info über Medien-Anfragen: https://developer.mozilla.org/es/docs/CSS/Media_queries

Ergebnisse