锚标签不填充高度和宽度答案

【问题标题】：Anchor tag not filling height and width锚标签不填充高度和宽度
【发布时间】：2018-09-11 13:37:21
【问题描述】：

我正在尝试在测试站点上创建图库部分，我已经创建了图库，但由于某种原因，a 标签根本无法填充图像的高度和宽度，它们似乎都折叠成第一个第一行图像的四分之一。

这里是代码：（实际上，在这段代码中，a 标签会获取高度和宽度，但图像是堆叠在一起的）

HTML

<section class="portfolio">
<h1>&mdash; PORTFOLIO &mdash;</h1>
<div class="gallery">
  <a href="#">
    <img src="img/img1.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img2.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img3.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img4.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img5.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img6.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img7.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img8.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img9.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href=#"">
    <img src="img/img10.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img11.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img12.jpg" alt="">
  </a>
</div>
</section>

CSS

.portfolio {
  width: 90%;
  position: relative;
  left: 80px;
}

.portfolio h1 {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
  font-size: 60px;
  font-family:'Poiret One', cursive;
}

.gallery img {
    margin: 5px;
    float: left;
    height: 230px;
    width: 330px;
    border: 1px solid #000;
    border-radius: 3px;
}

.gallery a {
  display: inline-block;
}

我可能做错了什么，但我无法解决！

提前致谢。

https://jsfiddle.net/utaLy18j/1/

【问题讨论】：

最好能提供fiddle link
通过从 img 中删除 float 并使用 display:block 检查一次
@Benjamin Done.. 我想！谢谢
@RITESHARORA 没有效果

标签： html css image height width

【解决方案1】：

您可以尝试这样做。

删除.gallery img 上的float:left。然后在.gallery img和.gallery上添加display:inline-block

.portfolio {
  width: 90%;
  position: relative;
  left: 80px;
}

.portfolio h1 {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
  font-size: 60px;
}

.gallery{
  display:inline-block;
}

.gallery img {
    display:inline-block;
    margin: 5px;
    height: 230px;
    width: 330px;
    border: 1px solid #000;
    border-radius: 3px;
}

.gallery a {
  display: inline-block;
}

<section class="portfolio">
<h1>&mdash; PORTFOLIO &mdash;</h1>
<div class="gallery">
  <a href="#">
    <img src="img/img1.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img2.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img3.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img4.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img5.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img6.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img7.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img8.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img9.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href=#"">
    <img src="img/img10.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img11.jpg" alt="">
  </a>
</div>

<div class="gallery">
  <a href="#">
    <img src="img/img12.jpg" alt="">
  </a>
</div>
</section>

希望这会有所帮助。

【讨论】：

不用担心。很高兴能提供帮助。

【解决方案2】：

我可以假设您希望图像以网格方式显示，如果是这样，下面的代码将有所帮助：

.gallery {
  display: inline-block;
}

在此处查看fiddle。

如果它适合你，请告诉我。

【讨论】：