HTML/CSSモザイク画像ギャラリー

Question

htmlとCSSでカップルの "ブロック"を作ろうとしていますが、私が含まれているイメージのようなものを作ろうとしています。テンプレートを探してみましたが、私はそれのようなものを見つけることができません、あなたを助けることができますか？

私はややこのすべてで初心者のよ、そう

は、私は自分自身がこれをしようとしていた誤解を許すが、私はこれを取得することはできません （あなたがイメージに表示リンクは必要ありません）私が代わりに何か他の画像を使用していますので...おそらく、どちらか私は心

に持っているものの

<div class="jumbotron"> 
<center> 
     <!-- FIRST ROW --> 
     <div class="row"> 
      <img src="http://www.cardcarryinglesbian.com/wp-content/uploads/2009/02/AD-SPACE2001.jpg" width="200" height="200" border="0"> 
      <img src="" width="200" height="200" border="0" class="img-circle"> 
      <img src="http://www.cardcarryinglesbian.com/wp-content/uploads/2009/02/AD-SPACE2001.jpg" width="200" height="200" border="0"> 
      <img src="" width="200" height="200" border="0" class="img-circle"> 
      </div> 
      <p></p> 
     <!-- SECOND ROW --> 
      <div class="row"> 
      <img src="" width="200" height="200" border="0" class="img-circle"> 
      <img src="http://www.cardcarryinglesbian.com/wp-content/uploads/2009/02/AD-SPACE2001.jpg" width="200" height="200" border="0"> 
      <img src="" width="200" height="200" border="0" class="img-circle"> 
      <img src="http://www.cardcarryinglesbian.com/wp-content/uploads/2009/02/AD-SPACE2001.jpg" width="200" height="200" border="0"> 
      <p></p> 
      </div> 
</center> 

例を動作するように

Answer 1

ちょうどあなたが幅を始めるのを手伝ってください。いくつかの方法がUL LI（最も単純）、フレックスボックス&など、いくつかの方法でグリッド/テーブルのような構造を作成できます。ここ

はUL LI構造は、JSのフィドルで

<div id="container"> 
    <ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    <li>6</li> 
    <li>7</li> 
    <li>8</li> 
</ul> 
</div> 

SCSSスタイルです：https://jsfiddle.net/itsselvam/sgmtu6cr/

私は、これはあなたが開始するのに役立ちます願っています！