html - 为什么这个 div 不会调整给定位置 :relative; left:0px; right: 200px; 的大小

Question

我想要第三个 div，“contents”，来填满它的容器，但是在右边正好留出 200px 的空间来适应 fixedWidthButtons。

到目前为止，无论我怎么设置，都不会影响div的宽度。

• 如果我设置它的 display:block;，它会完全填满容器，按钮会被推出容器。
  

• 如果我设置 display:inline-block;，容器将变为 181.344 像素宽，并且无论我将 right 设置为什么都不会调整大小。

    <div class="container" style="left:0; right:0; margin-bottom: 10px; height: 65px; display: block;">
        <div class="panel" style="width:100%; display: block;">
            <div class="contents" style="display:inline-block; position:relative; left: 0px; right: 200px;">
                <div class="buttonTextAndCounterContainer" style="width:100%; display:block">
                    <div class="button" style="float:left; display:none;"></div>
                    <div class="textAndCounterContainer" style="display:block;">
                        <div class="counter" style="float:right; display:block;"></div>
                        <div class="text" style="width:100%; position:relative; left:0px; vertical-align:top; display:inline-block;"></div>
                    </div>
                </div>
            </div>
            <div class="fixedWidthButtons" style="display:inline-block; float:right;"></div>
        </div>
    </div>

Answer 1

您需要阅读您正在处理的一些属性。位置是原点而不是宽度。

您还表达了 block 与内联 block 的一些问题，这些很容易用谷歌搜索。也就是说，解决您的问题的方法是更改​​ css:

.content {
    display: inline-block;
    width: calc(100% - 200px);
}