HTML/CSS 马赛克图片库

Question

我正在尝试用 html 和 CSS 制作几个“ block ”，并且我正在尝试制作类似于我包含的图像的东西。试过找模板，但我找不到类似的东西，你们中的任何人都可以帮助我吗？(不需要您在图片上看到的链接)

对于这一切，我只是一个初学者，所以请原谅任何误解

我自己正在尝试这个，但我也无法让它工作，可能是因为我使用的是图像而不是其他东西..

<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(最简单)、 flexbox 等。

这是 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/

我希望这能帮助你开始!