Question

我有一个带分屏的网站，在底部我希望有一个左侧或右侧的栏，但起点始终位于中心。

如果它是静态的，那就不会有问题，但我想让它变得动态。所以它可以是从左侧到右侧，通过宽度为0的点。

我目前的做法是：

#bar {
    display: block;
    position: absolute;
    width: 150px; /*this will be dynamic*/
    height: 20px;
    background-color: white;
    bottom: 0;
    margin-left: 50%;
}

但问题是，宽度不能有负值，否则我可以把它翻到另一边。

我该怎么办？谢谢！

Answer 1

我会这样试试：

将条形包裹在宽度为50％的元素内。
如果您想要左侧的栏，请将类left添加到包装器中，该包装器将栏内的左边距设置为auto。这使得条形图在包装内部向右跳转，因此条形图的末端将位于中心。
如果您想要右侧的栏，请将类right添加到包装器中，只需将栏的左边距设置为50％，使其从中心开始

因此，如果您动态设置条形宽度，则只需在包装器上交换left和right类，无论所需宽度是正还是负，并设置宽度永远是绝对值。

＆＃13;

.bar {
  border: 1px solid red;
  height: 20px;
  width: 150px;
}

.bar-wrapper {
  width: 50%;
}

.bar-wrapper.left .bar {
  margin-left: auto;
}

.bar-wrapper.right {
  margin-left: 50%;
}

＆＃13;

<div class="bar-wrapper left">
  <div class="bar"></div>
</div>
<div class="bar-wrapper right">
  <div class="bar"></div>
</div>

＆＃13;

如何用css缩放固定点周围的矩形宽度？

1 个答案: