CSS margin-left 问题

用户7841842

我这里有 5 条斜条纹……

....我的左侧有问题（和右侧 - > 它应该是窗口填充），它是空的，也应该有条纹，它们来自左侧（无中生有）。而且没有无论浏览器窗口大小如何。我知道我的 margin-left 有问题，但我没有得到我想看到的结果。

而且两边的间距要一样

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

我想要的结果图片：

猪球

希望这是你所期望的。

在下面的例子中，每个stripe都有2%宽度和1%边距 ~> 它有总4%视口宽度。要填充100%视口，您需要100 / 4 = 25条纹。该.mask元素帮助我们从的负边距中隐藏溢出的空间.container。结果以中心点完全对称。

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

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-06-2

我来说两句

0 条评论

登录后参与评论

上一篇：为什么kibana的可视化图表中的唯一计数不正确？

TOP 榜单

文章

CSS margin-left 问题

CSS margin-left 问题

Linux的官方Adobe Flash存储库是否已过时？

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

错误：“ javac”未被识别为内部或外部命令，

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

Modbus Python施耐德PM5300

为什么Object.hashCode（）不遵循Java代码约定

如何检查字符串输入的格式

检查嵌套列表中的长度是否相同

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

如何自动选择正确的键盘布局？-仅具有一个键盘布局

如何正确比较 scala.xml 节点？

在令牌内联程序集错误之前预期为 ')'

如何在JavaScript中获取数组的第n个元素？

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

如何监视应用程序而不是单个进程的CPU使用率？

解决类Koin的实例时出错

ES5的代理替代

有什么解决方案可以将android设备用作Cast Receiver？

VBA 自动化错误：-2147221080 (800401a8)

套接字无法检测到断开连接