好的,这是一个有趣的问题,我正在用头撞墙试图弄清楚。我目前正在建立我的投资组合网站并且我在学校,但我在一年前创建了一个非常丑陋的网站。在这个旧站点中,我有一堆文本居中对齐且响应完美的图像。这意味着当您缩小屏幕时,图像会居中堆叠并且它们都水平地粘在一起。
所以我通常使用 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;
}
最佳答案
元素的 display
属性定义了它在文档中的流动方式。 a
是一个内联元素,这意味着它旨在与文本成行 流动,并被如此对待。另一方面,div
是 block 元素,意味着它旨在定义文档的布局。默认情况下,这会导致每个 div
在文档中向下流动。
根据您想要实现的目标,您还可以更改 display
属性。 inline
和 block
是两个最基本的属性,但还有其他属性:https://developer.mozilla.org/en-US/docs/Web/CSS/display
关于html - 我的图片是水平堆叠的,我不知道我是怎么做到的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28814113/