CSS margin-left问题

时间:2017-04-09 21:34:49

标签: html css margin margin-left

我这里有5条斜条纹......

https://jsfiddle.net/70wk1hm2/

....我的左侧有问题(右侧 - > 它应该是窗口填充),它是空的,也应该有条纹,它来自左边(没有任何东西)。无论什么浏览器 - 窗口化。我知道我有一个左边缘的问题,但我没有得到我希望看到的结果。

两边的间距应该相同

HTML代码:

  <div class="stripe"></div>
  <div class="stripe"></div>
  <div class="stripe"></div>
  <div class="stripe"></div>
  <div class="stripe"></div>

CSS代码:

.stripe {
  height: 100%;
  width: 2%;
  background-color: black;
  position: fixed;
  transform: skew(-20deg);
  transform-origin: left bottom;
}

.stripe:nth-child(1) {
  height: 100%;
  width: 2%;
  margin-left: 0%;
  background-color: black;
  position: fixed;
}



.stripe:nth-child(2) {
  height: 100%;
  width: 2%;
  margin-left: 4%;
  background-color: black;
  position: fixed;
  animation-delay: 0.2s;
}

.stripe:nth-child(3) {
  height: 100%;
  width: 2%;
  margin-left: 8%;
  background-color: black;
  position: fixed;
}

.stripe:nth-child(4) {
  height: 100%;
  width: 2%;
  margin-left: 12%;
  background-color: black;
  position: fixed;
}

.stripe:nth-child(5) {
  height: 100%;
  width: 2%;
  margin-left: 16%;
  background-color: black;
  position: fixed;
}

我想要的结果图片: enter image description here

1 个答案:

答案 0 :(得分:0)

希望这是你的期望。

在下面的示例中,每个stripe都有2%宽度和1%边距〜&gt;它的视口宽度为4%。要填充100%视口,您需要100 / 4 = 25条纹。 .mask元素帮助我们隐藏了.container的负余量的溢出空格。结果完全由中心点对称。

&#13;
&#13;
html, body {
  height: 100%;
  margin: 0;
}

.mask {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  margin: 0 -100vh;
}

.stripe {
  float: left;
  height: 100%;
  width: 2%;
  margin: 0 1%;
  background-color: black;
  transform: skew(-20deg);
  transform-origin: center center;
}
&#13;
<div class="mask">
  <div class="container">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
</div>
&#13;
&#13;
&#13;