Question

我使用this响应式网格来显示图片，我的目标是在图像之间添加一个2px边框（他们触摸＆＃的地方） 39;），没有它出现在网格的外面。

Here's a link to a codepen example

＆＃13;
＆＃13;
/* ----------*Grid*---------- */ .cbp-rfgrid { margin: 0 0 0 0; padding: 0; list-style: none; position: relative; width: 100%; } .cbp-rfgrid li { position: relative; float: left; overflow: hidden; width: 33.3333333%; /* Fallback */ width: -webkit-calc(100% / 3); width: calc(100% / 3); } .cbp-rfgrid li a, .cbp-rfgrid li a img { display: block; width: 100%; cursor: pointer; } .cbp-rfgrid li a img { max-width: 100%; } /* Flexbox is used for centering the heading */ .cbp-rfgrid li a div { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: rgba(255,255,255,1); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; text-align: center; opacity: 0; } .cbp-rfgrid li a:hover div { opacity: 1; } .cbp-rfgrid li a div h3 { width: 100%; color: #000; padding: 0 10px; } @media (max-width: 767px){ .cbp-rfgrid li a div h3 { font-size: 2.375em; } } @media (min-width: 768px){ .cbp-rfgrid li a div h3 { font-size: 3.375em; } } /* Example for media query: change number of items per row */ @media screen and (max-width: 767px) { .cbp-rfgrid li { width: 100%; } }
＆＃13;
<ul class="cbp-rfgrid"> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Bukau</h3></div></a></li> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Noriko Olling</h3></div></a></li> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Erba</h3></div></a></li> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Raiso Japan</h3></div></a></li> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Aaltoin</h3></div></a></li> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Bukau</h3></div></a></li> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Noriko Olling</h3></div></a></li> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Erba</h3></div></a></li> <li><a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" /><div><h3>Raiso Japan</h3></div></a></li>  </ul>
＆＃13;
＆＃13;
＆＃13;

我试过玩边缘和＆amp;改变网格行为来实现这一目标，但到目前为止还没有找到合适的解决方案。

非常感谢任何建议和/或建议！

（ Codepen尽管网格是全宽的，但仍然增加了8px的余量，因此防止它变成10px的余量是我的目标 :)）

P.S。我没有嫁给这个特定的网格或任何东西，所以如果有更好/不同/更灵活的方法，我完全愿意接受它！

Answer 1

你可以使用纯flexbox -

来做到这一点

这是一个代码段，基于您的简化代码。

＆＃13;

/*
----------*Grid*----------
*/

*,
*::before,
*::after {
  box-sizing: border-box
}

.cbp-rfgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin:0;
  padding:0;
}

.cbp-rfgrid li {
  flex: 0 30%;
  margin: 5px;
  border: 2px solid red;
  position: relative;
  list-style: none
}

.cbp-rfgrid li a img {
  max-width: 100%;
  display: block
}

.cbp-rfgrid li a div {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content:center
}

.cbp-rfgrid li a:hover div {
  opacity: 1;
  background: white
}
@media (max-width:767px) {
.cbp-rfgrid li {
 flex: 0 100%
}
}

＆＃13;

<ul class="cbp-rfgrid">
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Bukau</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Noriko Olling</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Erba</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Raiso Japan</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Aaltoin</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Bukau</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Noriko Olling</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Erba</h3>
      </div>
    </a>
  </li>
  <li>
    <a href="#"><img src="http://i.imgur.com/y6zIhgP.jpg" />
      <div>
        <h3>Raiso Japan</h3>
      </div>
    </a>
  </li>
  <!-- ... -->
</ul>

＆＃13;

Answer 2

您的旁注似乎是您问题中的关键信息：

（尽管网格是全宽的，但Codepen增加了8px的余量，因此防止它变成10px的余量是我的目标:)）

这不是Codepen添加保证金。这是浏览器。

大多数（如果不是全部）浏览器为body元素提供8px的边距。它在default style sheet。

您可以自行覆盖此规则。只需将其添加到您的代码中：

body { margin: 0; }

此外，CSS Box Model的默认设置为content-box。这意味着您应用的宽度和高度计算仅包含内容框。填充和边框将单独添加。

您可以使用box-sizing: border-box覆盖此设置，告诉浏览器您的宽度和高度设置必须包含内容框，填充框和边框。换句话说，一切都在边境。

（边距总是单独添加。）

以下是CSS Box模型的说明：

revised codepen

在网格中的图像之间专门添加2px边框

2 个答案: