Question

好的，所以这是一个有趣的问题，我正在撞墙试图找出答案。我目前正在建立我的投资组合网站，我在学校，但一年前我创建了一个非常丑陋的网站。在这个旧网站中，我有一堆图像，文本对齐中心并完美响应。缩小屏幕时的含义图像堆叠居中，它们全部水平粘在一起。

所以我通常使用左边的浮点和边距来执行此操作，但在此代码中只有margin-left：auto，margin-right：auto，width 100％和text-align：center .... < / p>

所以我的问题是这些图像是如何水平堆叠的？我试图用粗略的草稿复制它，我的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是块元素，这意味着它旨在定义文档的布局。这导致默认情况下每个div在文档中向下流动。

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

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

1 个答案: