スクリーンショットのように画像を整列するにはどうすればいいですか？

Question

、注方法のスクリーンショットに示すように画像を整列させる：画像は、バックエンドからのものである..

I、右、左、このコード及び位置トップの画像を試み、底特性 しかし、もしイメージの数が増えてHTMLコードのリワークが発生し、css .. nth-childプロパティが使用されますが、レスポンスチェックで問題が発生します。正しい位置にバックエンドのイメージをアップロードする必要があります。

 <ul class="box-image"> 
    <li> 
     <div class="item"> 
     <img src="img/item1.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    <li> 
     <div class="item"> 
     <img src="img/item2.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    <li> 
     <div class="item"> 
     <img src="img/item3.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    <li> 
     <div class="item"> 
     <img src="img/item4.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    <li> 
     <div class="item"> 
     <img src="img/item5.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    <li> 
     <div class="item"> 
     <img src="img/item6.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    <li> 
     <div class="item"> 
     <img src="img/item7.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    <li> 
     <div class="item"> 
     <img src="img/item8.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    <li> 
     <div class="item"> 
     <img src="img/item9.jpg" class="img-responsive"> 
     <div class="hold-text"> 
      <h3>Al Raha Beach Villa 
      Abu Dhabi 204264</h3> 
     </div> 
     </div> 
    </li> 
    </ul> 

Answer 1

columnプロを使って簡単に達成できますcss3のperty。 css3のcolumnプロパティを使用して、イメージを同様に中断することができます。 column-countを使用すると、イメージを分割する列の数を指定できます。

codepen

あなたは、私が3列に画像を破ったcolumn-count: 3を使用してみましたサンプルを参照することができます。

HTMLコーディング

<div class='container'> 
    <span class='image-wrapper'> 
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" /> 
    </span> 
    <span class='image-wrapper'> 
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" /> 
    </span> 
    <span class='image-wrapper'> 
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" /> 
    </span> 
    <span class='image-wrapper'> 
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" /> 
    </span> 
    <span class='image-wrapper'> 
    <img src="https://googlechrome.github.io/samples/picture-element/images/butterfly.webp" /> 
    </span> 
</div> 

CSSスタイリング

.container { 
    column-count: 3; 
}