Question

我正在尝试在测试网站上创建图库部分，我已经制作了图库但由于某种原因，标签根本不会填充图像的高度和宽度，它们似乎都崩溃到了第一个第一行图像的四分之一。

以下是代码:(实际上，使用此代码，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

您可以尝试这样做。

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

上添加.gallery

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

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

锚标签没有填充高度和宽度

2 个答案: