HTML / CSS马赛克图像库

Question

我试图做一对＆＃34;阻止＆＃34;在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（最简单），flex box＆amp; amp;等。

这里是UL LI结构

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

JS小提琴的SCSS风格：https://jsfiddle.net/itsselvam/sgmtu6cr/

我希望这可以帮助你开始！