html - 如何为这些绝对定位的 <a> 元素应用边距？

Question

JSFiddle here!

在下面的 SSCCE(输出屏幕截图如下)中，我想要 <a>元素有点 margin的 10px在那之间，这样他们大约是10px彼此分开。但是他们有一个 position:absolute (这是我真实代码中的要求，我无法更改它)，所以当我给它们一个 margin 时它们会相互重叠.

我应该如何设置它们 10px彼此分开，这样它们也似乎在页面的水平轴上居中对齐 - 它们已经在它们中 center因为margin:0px auto ;在 .wrapper ，只是不要破坏它!

.wrapper {
  width: 100%;
  max-width: 90%;
  margin: 0px auto;
  position: relative;
  left: 0px;
  right: 0px;
}
.anchor1 {
  left: 0px;
}
.anchor2 {
  left: 25%;
}
.anchor3 {
  left: 50%;
}
.wrapper .anchor::before {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0px;
  top: 0px;
  content: " ";
  transition: all 0.3s ease 0s;
}
.anchor {
  position: absolute;
  height: 25vw;
  max-height: 400px;
  min-height: 190px;
  top: 0px;
  background-size: cover;
  background-position: center center;
  text-decoration: none;
}
.span-container {
  position: absolute;
  display: block;
  left: 10%;
  bottom: 10%;
  width: 80%;
}
.span-one {
  font-size: 271.579%;
  color: #FFF;
}
.span-two {
  font-size: 214.737%;
  display: block;
  color: #FFF;
  font-weight: 100;
  line-height: 0.9;
}

<div class="wrapper">
  <a class="anchor anchor1" href="#" style="left:0; width:33.333333333333%; background-image: url('http://shutupandtakemethere.com/pics/022014/stairs-in-a-japanese-garden-big.jpg');"></a>
  <a class="anchor anchor2" href="#" style="left:33.333333333333%; width:33.333333333333%; background-image: url('http://piximus.net/media/9366/beautiful-places-on-the-world-20.jpg');"></a>
  <a class="anchor anchor3" href="#" style="left: 66.666666666667%; width:33.333333333333%; background-image:url('http://freetopwallpaper.com/wp-content/uploads/2013/09/free-beautiful-place-wallpaper-hd-161.jpg')"></a>
</div>

Answer 1

你可以使用CSS的calc属性， 这是更新的 fiddle https://jsfiddle.net/r6a4nn55/1/

就这样给个宽度，

width: calc(33.333333333333% - 20px);

浏览器支持很好。在桌面上，问题是它是 IE 9+、Safari 6+，并且在 15+ 中出现在 Blink 之前不会出现在 Opera 中。在移动设备上，Android 和 Opera Mini 根本不支持它，而 iOS 仅支持 6.0+。

所以我建议你使用这样的后备宽度值，

.anchor {
    position: absolute;
    height: 25vw;
    max-height: 400px;
    min-height: 190px;
    top: 0px;
    background-size: cover;
    background-position: center center;
    text-decoration: none;
    width: 33%; /*fallback value if browser not supported calc*/
    width: calc(33.333333333333% - 20px); 
}