為什么這個div不調整給定位置的大小：相對； 左：0px; 右：200px；

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：

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

Answer 2

幾點建議：

• position: absolute相對於其相對位置（ relative位置的父母）的position: absolute作品。
• position: relative通知元素未放置（ 根本不更改布局），並且如果設置為absolute位置，則使其成為其子元素，並且相對於其父元素表現
• 設置inline-block還為我們提供了可以調整的設置寬度和高度； 如果不需要，最好使用inline 。
• 最好刪除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