html - 我的图片是水平堆叠的，我不知道我是怎么做到的？

Question

好的，这是一个有趣的问题，我正在用头撞墙试图弄清楚。我目前正在建立我的投资组合网站并且我在学校，但我在一年前创建了一个非常丑陋的网站。在这个旧站点中，我有一堆文本居中对齐且响应完美的图像。这意味着当您缩小屏幕时，图像会居中堆叠并且它们都水平地粘在一起。

所以我通常使用 float left 和 margins 来做到这一点，但在这段代码中只有 margin-left: auto, margin-right: auto, width 100%, and text-align: center....

所以我的问题是这些图像是如何水平堆叠的？我试图用一个粗略的草稿来复制它，而我的 div 只是垂直堆叠在彼此之上。

如果有人能解释这是怎么可能的，我将不胜感激。

这是html

<div id="container">
<div id="portfolio">
<br>
    <a class="thumbnail" href="images/Bottle Beer Mockups.jpg"><img src="images/3DudesBrew300x150.jpg" class="workSpace"></a>
    <a class="thumbnail" href="images/GreatBankMockUp.jpg"><img src="images/GreatBank300x150.jpg" class="workSpace"></a>
    <a class="thumbnail" href="images/BabyShowerMockUp.jpg"><img src="images/BabyShower300x150.jpg" class="workSpace"></a>
    <a class="thumbnail" href="images/JayhawkPosterFramed.jpg"><img src="images/Jayhawk300x150.jpg" class="workSpace"></a>
    <a class="thumbnail" href="images/JohnGlaser5kPoster.jpg"><img src="images/JohnGlaser300x150.jpg"class="workSpace"></a>
    <a class="thumbnail" href="images/MagazineOpenMockup.jpg"><img src="images/BoyScouts300x150.jpg" class="workSpace"></a>
    <a class="thumbnail" href="images/PissingDogInFrame.jpg"><img src="images/PissingDog300x150.jpg" class="workSpace"></a>
    <a class="thumbnail" href="images/LostWorldTylerReardon.jpg"><img src="images/LostWorld300X150.jpg" class="workSpace"></a>
    <a class="thumbnail" href="images/BelmarRisingBeach4.jpg"><img src="images/BelmarRising300x150.jpg" class="workSpace"></a>
    <a class="thumbnail" href="images/SharonStrineMockUp.jpg"><img src="images/SharonStrine300x150.jpg" class="workSpace"></a>

</div>
</div>

这是CSS

 .thumbnail{
z-index: 0;
 }

  #portfolio{
width:100%;
margin-left:auto;
margin-right:auto;
background-color:#CCC;
text-align:center;
}

 #container{
width:100%;
background-color:#000;
margin-left:auto;
margin-right:auto;
 }
 .workSpace{
width:250px;
padding: 3px;
}

.workSpace:hover{
opacity:.4;
transition: 1s;
}

a:hover{
text-decoration:underline;  
}

Answer 1

元素的 display 属性定义了它在文档中的流动方式。 a 是一个内联元素，这意味着它旨在与文本成行 流动，并被如此对待。另一方面，div 是 block 元素，意味着它旨在定义文档的布局。默认情况下，这会导致每个 div 在文档中向下流动。

根据您想要实现的目标，您还可以更改 display 属性。 inline 和 block 是两个最基本的属性，但还有其他属性:https://developer.mozilla.org/en-US/docs/Web/CSS/display