Question

申请保证金

在下面的SSCCE（输出截图如下）中，我希望<a>元素之间有margin个10px，这样它们就是10px彼此分开。但是他们有position:absolute（这是我真实代码中的一项要求，我无法对其进行更改），因此当我给他们margin时，它们会相互重叠。

我应该怎样做才能将它们10px彼此分开，以使它们看起来在页面的横轴上居中对齐 - 它们已经在它们中{ {1}}因为center;在margin:0px auto，只是不要破坏它！

＆＃13;

.wrapper

＆＃13;

.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;
}

＆＃13;

Answer 1

您可以使用CSS的calc属性，这是更新的小提琴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); 
}

Answer 2

在这个解决方案中，Anchors之间的边距恰好是10 px，但是之间有一个空格。如果你不需要响应，你可以去qith px值。

我所做的就是删除内联样式并将它们放入锚定css样式中，并减少使用和更多左侧。 ;）

.wrapper {
	width:100%;
	max-width:90%;
	margin: 0px auto;
	
	position:relative;
	left:0px;
	right:0px;
}


.anchor1 {
	left:0px;
    width:25%;
    background-image:url('http://shutupandtakemethere.com/pics/022014/stairs-in-a-japanese-garden-big.jpg');
}

.anchor2 {
	left:30%;
    width:25%;
    background-image: url('http://piximus.net/media/9366/beautiful-places-on-the-world-20.jpg');
    
}

.anchor3 {
	left:60%;
    width:25%;
    background-image:url('http://freetopwallpaper.com/wp-content/uploads/2013/09/free-beautiful-place-wallpaper-hd-161.jpg');
}

.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="#"></a>
    <a class="anchor anchor2" href="#"></a>
    <a class="anchor anchor3" href="#"></a>
</div>

如何为这些绝对定位<a> elements?

2 个答案: