我正在使用的网站中有一个图片库。 我需要在每个图像容器上使用 inline-block 而不是 float ,以便稍后可以将整个画廊居中(我发现经过这么多次尝试我永远无法将 float 图像居中) 如果有人在我的代码中发现缺陷,我将感激不尽。 (为了记录,我在图片库上方的顶部导航上使用了 float 。请告诉我它是否影响了图片库!)
This is html code for image gallery.
<section>
<article class="img1">
<a href=""><img src="img/img1.png"></a>
<dl>
<a href="#"><dt>Image Title</dt></a>
<dd>Image Description</dd>
</dl>
</article>
<article class="img2">
<a href=""><img src="img/img2.png"></a>
<dl>
<a href="#"><dt>Image Title</dt></a>
<dd>Image Description</dd>
</dl>
</article>
<article class="img3">
<a href=""><img src="img/img3.png"></a>
<dl>
<a href="#"><dt>Image Title</dt></a>
<dd>Image Description</dd>
</dl>
</article>
This is css code for image gallery.
section{
margin-top: 80px; /* the gap between top navigation above */
}
article .img1, .img2, .img3 {
display:inline-block;
width: 100%;
height: auto;
margin-left: 2%;
padding: 0;
}
article img{
width: 250px;
height: 250px;
margin: 0;
padding: 0;
}
article dl{
display: block;
width: 250px;
margin-top: 10px;
text-align: left;
}
article dt{
font-size: 0.9em;
font-weight: 400;
}
article dd{
margin-left: 0;
font-size: 0.9em;
font-weight: 300;
}
最佳答案
问题是您正在设置 width
的 100%
在 <article>
上元素,所以尽管它们被设置为 display: inline-block
, 他们各自占据 100%
的行。为避免这种情况,您需要为它们提供更小的基于百分比的宽度,最好使用 width: calc((100% / 3) - (2% * 3))
。 .这将它们设置为占用尽可能多的宽度,同时考虑元素数量和 margin-left
。在每个。
另请注意,您的 <img>
标签有一个硬编码固定 width
.因为您现在正在调整包含 <article>
标签是相对于容器的,这些图像应该被赋予 width
的 100%
.
这可以从以下方面看出:
section {
margin-top: 80px;
/* the gap between top navigation above */
}
.img1,
.img2,
.img3 {
display: inline-block;
width: calc((100% / 3) - (2% * 3));
height: auto;
margin-left: 2%;
padding: 0;
}
article img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
article dl {
display: block;
width: 250px;
margin-top: 10px;
text-align: left;
}
article dt {
font-size: 0.9em;
font-weight: 400;
}
article dd {
margin-left: 0;
font-size: 0.9em;
font-weight: 300;
}
<section>
<article class="img1">
<a href=""><img src="http://placehold.it/100"></a>
<dl>
<a href="#"><dt>Image Title</dt></a>
<dd>Image Description</dd>
</dl>
</article>
<article class="img2">
<a href=""><img src="http://placehold.it/100"></a>
<dl>
<a href="#"><dt>Image Title</dt></a>
<dd>Image Description</dd>
</dl>
</article>
<article class="img3">
<a href=""><img src="http://placehold.it/100"></a>
<dl>
<a href="#"><dt>Image Title</dt></a>
<dd>Image Description</dd>
</dl>
</article>
关于css - 内联 block 在图片库中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49269101/