Question

我是HTML的新手。我有这个代码，用HTML制作了9张图片：

<a href=""><img src="fotos/photo.jpg" style="width: 160px; height: 160px;"></a>

我想知道如何制作这样的照片：

https://gyazo.com/cde734a459da86698fcb60363cdea272

使用这个或HTML的框架会更好吗？

Answer 1

你可以用flex-box来做。见例：

<html>
<style>
.container{
display:flex;
flex-wrap:wrap;
width:100vw;

}

.image{
display:flex;
width:33.3vw;
}
</style>

<div class="container">
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
    <div class="image"><img src="https://i.imgur.com/0I7wcbT.jpg"></div>
</div>
</html>

Answer 2

使用display flex。

CSS

.container {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly
}

HTML

<div class="container">
  <a href=""><img src="fotos/photo.jpg" style="width: 160px; height: 160px;"></a>
  <!-- 9 times -->
</div>

继承人jsfiddle

HTML中的图片位置，有谁知道？

2 个答案: