Question

我对照片网格有一些问题。它就像在右侧有一个填充，我已经把规则像填充右0 或保证金权利或权利0仍然看到问题。

此处我的解决方法https://codepen.io/RIN-id/pen/ZrzyZB

的index.html

<ul id="photo-gallery">


    <li>
        <a href="a.jpg" data-description=" Mulak Mar-onan (Kapal Tuktuk)"> 
                          <img src="img/galery/a.jpg" > 
                        </a>
    </li>




</ul>

styles.css的

 #photos {
  width: 100%;
  height: 100%;

}

#photo-gallery {
  width: 100%;
  overflow: scroll;

  /*! overflow-x: scroll; */
}
  h3 {font-size: 20px; color: #fff;}

#photos img {
  width: 30%;
  float: left;
  display: block;
  margin: 2px;

}

ul {
  list-style: none;
  margin: 0px auto;
  padding: 10px;
  display: block;
  max-width: 780px;
  text-align: left;
}

#overlay {
  background: rgba(0,0,0, .8);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
  z-index: 5000;
}

#overlay img {
  margin: 10% auto 0;
  width: 100%;
  border-radius: 5px;
  z-index: 5000;
  position: relative;
  padding-top: 113px;
}

谢谢你，抱歉语法不好。

Answer 1

尝试保证金：0;填充：你的css中的0

Answer 2

问题在于图像每个浮动的宽度为30％，只有很小的余量不会抵消留下的10％间隙。

我会做什么： - 删除#photos img的保证金 - 宽度变为33.33％ - 添加所需的填充（例如2px） - 添加box-sizing: border-box以包括宽度填充

照片网格似乎不合适

2 个答案: