Question

我希望第三个div“内容”填充其容器，但在右侧留下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

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

你还表达了一些关于块与内联块的问题，这些问题很容易被谷歌搜索。那说你的问题的解决方案是改变css：

AuthType Basic
AuthName "Administrator"
AuthUserFile /home2/mesquiu0/.htpasswds./htpasswd
Require valid-user

Order Deny,Allow
Deny From All
Allow From 127.0.0.1

Answer 2

很少有建议：

position: absolute相对于其亲属的位置（位于relative的父级）。
position: relative通知元素未定位（根本不更改布局），如果将absolute位置设置为相对于其父级的行为，则将其设为子项
设置inline-block还可以为我们提供设置宽度和高度，它可以调整到;如果不需要，最好去inline。
最好删除<{li}下面的inline-styles - 示例代码段

.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>

Answer 3

解决方案：

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

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

为什么这个div不会调整给定位置：相对;左：0像素;右：200px;

3 个答案: