Float Artikel in der Liste

Question

Ich habe ein Problem, ich weiß nicht, wie zu lösen, es ist schwer zu erklären, aber ich werde versuchen, es gibt auch ein Bild zu demonstrieren.

Ich habe ein Problem mit der Bestellliste, wenn die nächste Zeile von li Element in der zweiten Zeile geht, gibt es viel Platz zwischen der obigen Zeile und unter Zeile, würde ich ohne Abstand sein.

https://jsfiddle.net/52suh3pt/

• Ich habe versucht, mit Schwimmer zu lösen: links, aber es ist nur für eine Seite zu arbeiten.

Schauen Sie dieses Bild, links ist richtig und das möchte ich, rechts ist derzeit.

HTML:

<div> 
<ul> 
<li><img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg" alt=""></li> 
<li><img src="https://image.freepik.com/free-vector/blue-background_1344-24.jpg" alt=""></li> 
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li> 
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li> 
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li> 
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li> 
<li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li> 
<li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li> 
</ul> 

</div> 

CSS:

div{ 
    width:835px; 
} 
li{ 
    display:inline-block; 
    list-style:none; 
    width:262px; 
} 
img{ 
    width:100%; 
} 

Answer 1

Dies ist relativ einfach mit Masonry zu erreichen.

Mauerwerk erfordert keine jQuery, es funktioniert wie eine eigenständige Bibliothek. Der beste Teil ist, dass Sie es mit HTML initialisieren können. Die Größe der Minifeid-Bibliothek beträgt etwa 24 KB. Die Nummer ist auf etwas unter 8kB reduziert, wenn Sie Gzip compression

verwenden Die Schritte sind einfach.

1. Laden Sie die Bibliothek

   <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js></script> 
   

2. Finden Sie den Raster-Wrapper div und es verwenden, das Mauerwerk zu initialisieren mit oder in meinem Beispiel.

   <div class="grid" data-masonry='{ "itemSelector": ".item"}'> 
   

3. media queries Hinzufügen von Elementen in Reaktion auf der Grundlage Ihrer persönliche Präferenz zu machen.

Arbeiten ansprechbar Beispiel:

.grid { 
 
    width: 100%; 
 
    margin: 1em auto; 
 
    text-align: center; 
 
} 
 

 
.item img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.item { 
 
    margin: 0 auto; 
 
    box-sizing: border-box; 
 
    padding: 3px; 
 
} 
 

 

 
/* Media Queries */ 
 

 
@media (min-width: 0px) { 
 
    .item { 
 
    width: 99%; 
 
    } 
 
} 
 

 
@media (min-width: 500px) { 
 
    .item { 
 
    width: 49% 
 
    } 
 
} 
 

 
@media (min-width: 1000px) { 
 
    .item { 
 
    width: 32.33%; 
 
    } 
 
} 
 

 
@media (min-width: 2160px) { 
 
    .item { 
 
    width: 24% 
 
    } 
 
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> 
 

 

 
<div class="grid" data-masonry='{ "itemSelector": ".item"}'> 
 

 
    <div class="item"> 
 
    <img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg"> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="https://image.freepik.com/free-vector/blue-background_1344-24.jpg"> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg"> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg"> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg"> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg"> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg"> 
 
    </div> 
 

 
    <div class="item"> 
 
    <img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg"> 
 
    </div> 
 

 
</div>

Dies kann durch die Verwendung der imagesLoaded Bibliothek verbessert werden, um sicherzustellen, Mauerwerk nicht ausgelöst, bis alle Fotos voll haben geladen. Dies verhindert ein fehlerhaftes Layout. Darauf werde ich jedoch nicht eingehen, da dies über den Rahmen dieser Frage hinausgeht.

Answer 2

Was ist das?

div { 
 
    width: 835px; 
 
} 
 

 
.col { 
 
    width: 30%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    list-style: none; 
 
} 
 

 

 
img { 
 
    width: 100%; 
 
}

<div> 
 
    <div class="col"> 
 
    <li><img src="https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252_960_720.jpg" alt=""></li> 
 
    <li><img src="https://image.freepik.com/free-vector/blue-background_1344-24.jpg" alt=""></li> 
 
    <li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""> 
 
    </li> 
 
    </div> 
 
    <div class="col"> 
 
    <li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li> 
 
    <li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li> 
 
    <li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li> 
 
    </div> 
 

 
    <div class="col"> 
 
    <li><img src="http://1.bp.blogspot.com/-MpDQSvxf9s0/VWXlWnzC3NI/AAAAAAAAF-c/HlZS-DDyosg/w1200-h630-p-k-no-nu/fundo-vermelho%2B%25281%2529.jpg" alt=""></li> 
 
    <li><img src="http://images.all-free-download.com/images/graphiclarge/free_swirly_blue_stars_vector_background_148475.jpg" alt=""></li> 
 
    </div> 
 

 
</div>