リストの浮動小数点項目

私は問題を抱えていますが、解決方法はわかりませんが、説明するのは難しいですが、試してみます。リストの浮動小数点項目

私はリストの次の行が2番目の行に上の行と下の行の間に多くのスペースがあるときに、私は間隔なしでなければなりません。

私はフロートで解決しようとしました：左が、それは片側だけのために働いています。

この写真を見て、左が正しかった、私がしたい、右が現在です。

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%; 
}

出典

2017-08-12 ml92

https://masonry.desandro.com/ –

これはMasonryを達成することは比較的容易です。

masonryはjQueryを必要とせず、スタンドアロンのライブラリとして機能します。最も重要な部分は、HTMLで初期化できることです。 minifeidライブラリのサイズは約24Kbです。使用する場合、数は8kbを少し下回りますGzip compression

手順は簡単です。

グリッドラッパーdivを見つけ、石工や私例でを初期化するためにそれを使用
```
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js></script> 
```

を使用してライブラリをロードします。

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

あなた個人的な好みに基づいてアイテムが応答するためにmedia queriesを追加します。すべての写真が完全になるまでこれをさらに石工がトリガされませんを確認するためにimagesLoadedライブラリを使用することによって改善することができる

.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/[email protected]/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>

：応答例作業

ロードされる。これにより、レイアウトが壊れないようにします。しかし、私はこの問題の範囲を超えているので、それには入りません。

出典

2017-08-12 14:15:32

？

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>

出典

2017-08-12 13:54:17

リストの浮動小数点項目

答えて

関連する問題