使塊填充其容器的整個寬度

如何使塊填充其容器的整個寬度，因爲兩者都是絕對定位的，而內部填充的是填充。使塊填充其容器的整個寬度

我做了的jsfiddle： http://jsfiddle.net/dmdBB/

這裏的樣本：

<style> 
.containerOut { 
    position: absolute; 
    width: 400px; 
    height: 400px; 
    border: thin solid black; 
} 

.containerIn { 
    position: absolute; 
    outline: 1px solid red; 
    width: auto; 

    padding: 4px; 
} 
</style> 
<div class="containerOut"> 
     <div class="containerIn"> 
      im not large enough 
     </div> 
</div>

在此示例中，.containerIn元素太薄。如果我將它的寬度設置爲100％，它會因填充而溢出。我想要一個CSS解決方案，我知道放置一個具有100％寬度和0margin/padding/border的中間HTML容器可以解決這個問題。

來源

2011-06-17 BiAiB

@thirtydot這是故意的，但我不能garantee我內塊將有sufficent寬度內容來實現這一目標。很明顯，我可以把一些填充程序隱藏起來，但是但我有興趣知道在我編寫髒代碼之前是否有乾淨的css解決方案。 – BiAiB 2011-06-17 08:58:57

而不是使用width: 100%的，你需要使用left: 0; right: 0。

要修復最後一個示例，可以使用word-wrap: break-word。

參見：http://jsfiddle.net/QjdD5/1/

.containerIn { 
    width: auto !important; /*just to override your inline CSS */ 
    left: 0; 
    right: 0; 
    word-wrap: break-word 
}

來源

2011-06-17 08:54:24 thirtydot

我所有的例子都解決了cssly，很棒的工作:) – BiAiB 2011-06-17 09:05:32

啊！寬度自動..我怎麼錯過了：P – Achshar 2011-06-17 09:11:28

right:0px; 
left:0px; 
overflow:hidden;

的內部元件，如果你不想要那個紅色邊框顯示在黑色邊框可以使用overlfow：隱藏的外層div

來源

2011-06-17 08:51:34 Achshar

替換...

寬度：自動;

...

left：0; right：0;

測試對鉻

來源

2011-06-17 08:52:10 ricosrealm

仍然留下填充！和最後一個例子..兩個隱藏的溢出將做的伎倆.. – Achshar 2011-06-17 08:53:50

@Achshar：謝謝指出（我寫了很多相同的答案）。我已經用修復程序更新了我的答案。 – thirtydot 2011-06-17 08:57:04

似乎在jsfiddle上工作正常... – ricosrealm 2011-06-17 08:58:11

@biab;填充&邊框將寬度添加到元素。可能是你可以把你的CSS：

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

http://jsfiddle.net/sandeep/dmdBB/28/

來源

2011-06-17 08:55:26 sandeep

我測試了它，它似乎是一個很好的解決方案，但不幸的是它打破了我的例子4.無論如何，你已經獲得+1。 – BiAiB 2011-06-17 09:01:34

我更新我的小提琴 – sandeep 2011-06-17 09:04:04

+1，這也是一個有效的解決方案。你可以使用'word-wrap：break-word'修復「example 4」。我認爲'left：0;右：0'在這種情況下稍好一些，因爲它在IE7中工作，而'box-sizing'不會。 – thirtydot 2011-06-17 09:04:09

使塊填充其容器的整個寬度

回答

相關問題