锚标签不填充高度和宽度

Question

我正在尝试在测试站点上创建图库部分，我已经创建了图库，但由于某种原因，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/

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

希望这对您有所帮助。

Answer 2

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

.gallery {
  display: inline-block;
}

请参阅此处 fiddle。

请告诉我它是否适合你。

锚标签不填充高度和宽度

Anchor tag not filling height and width

html

css

image

height

width