css calc 与中心偏移

Question

这是我正在尝试的

我在中心有一个元素，我想留在中心。现在我想要一个元素来拥抱这个元素的左侧。

所以实际上我想要左边 div 的最左边位置是 right:calc(50%-200px-(lefts width));

我的问题是做对了：50%；做了一些但正确的事情：calc(50% +100px) 没有。

我怎样才能做到让左边班级的 div 总是拥抱中间的那个人？

<div class="left"> hug this center element </div>
<div class="middle"> this stays in the middle</div>

Answer 1

left: 50%; /* align center */
margin-left: -30px;  /* your element width / 2 when element = 60px */

Answer 2

它确实非常简单，但专用于单个图形或事件。更重要的是它还解决了“调整大小”异常。所以代码开销是最小的。使用宽度为 300px 的图形，我们需要在方法中声明 50%。所以：

     #imgone {
     left : calc (100% - 150px / 2);
     /* other code here*/;
     }

这个最重要的规则是确保 + 或 - 之间有“空格”以避免带符号的数字。对于乘法和除法采用这种约定很有用。可以使用所有可识别的值属性（例如：px、pt、em 等）。然而，浏览器对“auto”的处理方式不同，因此被排除在外。遗憾的是，如果有一点前瞻性的思考，“center-row:image”（原文如此）将与“center-col:image”（原文如此）一起成为一种明显的方法。也许太简单了？

Answer 3

以下内容有效 - 将您的 HTML 调整为：

<div class="middle"> this stays in the middle
    <div class="left"> text here </div>
</div>

改变你的CSS.left

.left {
    position: relative;
    right: 60px; //adjust this to change left-right position of the .left div
}

JS 小提琴演示