Question

我一直在尝试为我的投资组合做一个图像库，但我希望它们的图像没有边框，并且水平和垂直相邻。不幸的是，我所有的尝试都没有成功。

.portfolio {
  height: 1250px;
  width: 80%;
  margin: 0 auto;
  background-color: #CF9;
}
#thumbs {
  width: 20%;
  height: 50px;
  color: #090;
  float: left;
  font-size: 0px;
}

<div class="portfolio">
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
  <div id="thumbs">
    <a href="http">
      <img src="thumb.png">
    </a>
  </div>
</div>

http://www.adhemas.com/是我想要达到的目标，除了我的图像大小都相同（虽然我不介意如何使它们的大小不同但仍然堆叠）

Answer 1

元素ID在整个文档中应该是唯一的。如果您有多个具有相同ID的元素，则您的HTML无效，这可能会导致您的网页停止按预期工作。

来源：Can multiple different HTML elements have the same ID if they're different types?

我建议你use classes instead，它支持多个元素具有相同的类。

将所有元素设为class thumbs而不是id。然后，您可以在CSS规则中使用.thumbs代替#thumbs来设置元素的样式。

Answer 2

首先要修复的是id。您无法在html中重复使用id。

接下来，您需要将a和img设置为.thumb元素内的约束。

如下所示

.portfolio {
  height: 1250px;
  width: 80%;
  margin: 0 auto;
  background-color: #CF9;
}
.thumbs {
  width: 20%;
  color: #090;
  float: left;
  font-size: 0px;
}
.thumbs a {display:block;}
.thumbs img{width:100%;}

<div class="portfolio">
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/1">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/2">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/3">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/4">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/5">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/6">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/7">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/8">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/9">
    </a>
  </div>
  <div class="thumbs">
    <a href="http">
      <img src="http://lorempixel.com/500/500/cats/10">
    </a>
  </div>
</div>

Answer 3

完全删除<div>代码并将<img> CLASS（不要多次使用ID）设置为thumbs，将图像很好地堆叠在一起，没有边距（谢谢到你的左边漂浮）。除非有理由保留<div>，否则我建议删除它们，因为它们只是阻碍了它们，它们也是块元素，与你所追求的内联布局相反。

没有边框的图片库？

3 个答案: