html - 在纯 CSS 上调整居中 div 的大小，左侧固定 div

Question

如何使用另一个具有 position:fixed 属性的 div 自动调整水平居中的 div 的大小？

为了更好地理解我的意思，请看下面的图片。 div A 是固定大小的固定 div，div B 是水平居中的 div。我希望 div B 以这种方式调整大小(当我调整浏览器窗口大小时)，以便 A 的右边框和 B 的左边框永远不会重叠(理想情况下，如果边界之间的距离保持相同)。

我知道使用 JavaScript 通过对调整大小事件使用react可以相当容易地完成此操作，但我想知道是否有任何方法可以在纯 CSS 中实现此目的？

Answer 1

这是另一种方法。这应该也适用于较旧的浏览器。

<style>
div {
	border: 1px solid red;
	height: 100px; }

#A {
	position: fixed;
	width: 150px; }

#B {
	margin: 0px 155px; }
</style>

<div id="A">Stuff</div>
<div id="B">Stuff</div>