代码之家 › 专栏 › 技术社区 › Jinsoo Kang

图像库中的内联块不工作

sections gallery image css

0

Jinsoo Kang · 技术社区 · 7 年前

我在一个网站上有一个图片库。我需要在每个图像容器上使用内联块,而不是浮动,以便以后可以将整个库居中(我发现,在多次尝试之后,我永远无法将浮动图像居中) 如果有人发现我的代码有缺陷,我将不胜感激。 (作为记录,我在图片库上方的顶部导航中使用了float。请告诉我它是否影响了图片库!)

这是图像库的html代码。

   <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>

这是图像库的css代码。

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; 
}

1 回复 | 直到 7 年前

1

0

Obsidian Age 7 年前

问题是您正在设置 width 属于 100% 在 <article> 元素 display: inline-block ,他们各自 100% 该行的。为了避免这种情况,您需要给它们一个较小的基于百分比的宽度,最好是 width: calc((100% / 3) - (2% * 3)) 。这将使它们占据尽可能多的宽度,同时考虑元素的数量和 margin-left 在每个上。

还请注意 <img> 标签具有硬编码固定 宽度 。因为你现在正在调整你的控制 <文章(>); 标签要相对于容器,这些图像应给出 宽度 属于 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>