html - 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结构

<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 fiddle 的 SCSS 样式：https ://jsfiddle.net/itsselvam/sgmtu6cr/

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