Question

我想制作连续3张图片的简单照片库，当我添加宽度：33％;宽度不适用于布局类。任何人都可以建议，我怎样才能让它正确显示？

示例：https://jsfiddle.net/kani339/ed7g6hjp/

HTML：

<section>
    <div class="photo-gallery">
    <div class="layout">
        <div class="img-block">
            <img src="download.jpg" alt="">
        </div>
    </div>
    </div>
</section>

CSS：

.layout {
    background: red;
    opacity: 1;
    height: 250px;
    width: 33%;
    float: left;
}

.img-block img {
    height: 250px;
    width: 33%;
    float: left;
}

.img-block img:hover{
    opacity: 0.5;
    cursor:pointer;
}

Answer 1

你的33％影响图像而非布局。

这样的事可能吗？

.layout {
  background: red;
  opacity: 1;
  height: 250px;
  width: 100%;
  /* width: 350px; */
  float: left;
}
.img-block img {
  height: 250px;
  width: 33%;
  float: left;
}
.img-block img:hover {
  opacity: 0.5;
  cursor: pointer;
}

<section>
  <div class="photo-gallery">
    <div class="layout">
      <div class="img-block">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
        <img src="http://hdwpro.com/wp-content/uploads/2015/12/Widescreen-Image-1366x768.jpg" alt="">
      </div>
    </div>
  </div>
</section>

添加宽度百分比时叠加不起作用

1 个答案: