为什么这个 div 不会调整给定位置的大小：相对；左：0px；右：200px；

Question

我希望向下的第三个 div“内容”填充其容器，但在右侧留出 200 像素的空间以适应 fixedWidthButtons。

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

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

• 如果我设置display:inline-block;，容器将变为181.344 px 宽，并且无论我将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

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

您还表达了块与内联块的一些问题，这些问题很容易在谷歌上搜索到。也就是说，您的问题的解决方案是更改 css：

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

Answer 2

解决方案：

要仅使用left 和right 设置div 的宽度，您必须设置div 的position: absolute;

来源：http://alistapart.com/article/conflictingabsolutepositions

Answer 3

几点建议：

• position: absolute 相对于其相对位置（位于relative 的父级）起作用。
• position: relative 通知元素未定位（完全不改变布局），如果设置为absolute，则使其成为子元素的位置相对于它的父元素
• 设置inline-block 也为我们提供了设置宽度和高度，它将调整到；如果不需要，最好使用inline。
• 把inline-styles去掉就好了 - 下面的示例sn-p

.container {
  margin-bottom: 10px;
  height: 65px;
  border: 1px solid black;
  position: relative;
}
.contents {
  border: 1px solid grey;
  position: absolute;
  display: inline-block;
  width: 300px;
  left: 0;
}
.fixedWidthButtons {
  display: inline-block;
  width: 200px;
  position: absolute;
  right: 0;
  border: 1px solid red;
}

<div class="container">
  <div class="panel">
    <div class="contents">
      <div class="buttonTextAndCounterContainer">
        <div class="button">button</div>
        <div class="textAndCounterContainer">
          <div class="counter">counter</div>
          <div class="text">text</div>
        </div>
      </div>
    </div>
    <div class="fixedWidthButtons">For my buttons</div>
  </div>
</div>