2016-11-02 31 views
-2

鼓勵改進此問題的建議。我會更新這個問題,以更準確地解釋是什麼導致了問題,一旦我們找出是什麼導致它幫助那些具有類似DOM結構的人。什麼可以防止位置:相對;左:0;右:200px;從影響元素的寬度?

目標:將內容div從面板的左側拉伸到200px寬的固定寬度按鈕的邊緣。

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

我看到幾個如何設置寬度的例子,但很少解釋什麼可以阻止它的工作。

我有一些元素在我的HTML,正在響應正確的CSS,使用position: absolute; left: 0; right: 200px;設置寬度,但是,我有一個div,它不會響應左和右。我似乎可以設置它的左邊或右邊,但是如果兩者都設置好了,它似乎只能根據左邊的值計算它的位置。

  • 我沒有設置div的寬度。
    -I've嘗試設置width: auto;
    -I've嘗試設置position: absolute;
    -I've受審leftright我沒有使用變量
  • 我並不想居中DIV各種值,我想以這種方式設置它的寬度(特別是爲了能夠定義它的寬度,以便它將佔用它的整個父親減去可能存在或不存在的其他具有固定寬度的div,父寬度是可變的)
  • 該div嵌套在其他幾個圖層深處,在父容器中是否存在可能導致此行爲的設置?如果是這樣,什麼可能會阻止它?
  • 我在創建元素之後,但在它被添加到它的容器之前,在Javascript中設置了CSS,我不認爲這是時間問題,但它可能是相關的。
  • 是否有可能干擾的特定父元素?
  • 是否存在可能會被幹擾的樣式?

什麼是可能導致此CSS無法設置元素的寬度的一些可能的情況?

這裏有一些我已經調查了資源,他們都不來解決我的問題,但他們可能是你的興趣:
最相關:
http://alistapart.com/article/conflictingabsolutepositions
https://www.sitepoint.com/css-sizing-absolute-position/

少有關上漿,更約定位:
http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/
http://blog.teamtreehouse.com/css-positioning
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
https://css-tricks.com/centering-css-complete-guide/
CSS positioning to fill container: width vs. left/right?

+2

即使它是封閉的源代碼,您可以顯示一些代碼。你能不能做一個只顯示減少的情況的jsfiddle,就像容器和這些特定盒子的css一樣? – deadfishli

+2

有一段文字,但沒有代碼(HTML和CSS)。請考慮創建一個最小的,具體的和可驗證的示例,以便社區可以幫助解決問題。 – Terry

+0

我會看看我是否可以在簡化狀態下複製併發布該代碼。 –

回答

相關問題