CSS的div寬度自動填充整個父股利

這是我的代碼：CSS的div寬度自動填充整個父股利

.divUserRepCont 
{ 
    position: absolute; 

    top: 0; 
    left: 105px; 

    width: 195px; 
    height: 25px; 
} 

.divUserContCon 
{ 
    width: auto; 
    height: 100%; 

    background-color: red; 
} 

.divUserCon 
{ 
    width: 50px; 
    height: 20px; 
}

HTML：

<div class="divUserRepCont"> 
    <div class="divUserContCon"> 
     <div class="divUserCon"> 

     </div> 
    </div> 
</div>

我期待寬度50像素的紅酒吧，而是自動寬度「divUserContCon」填滿了它的父div的整個195px。爲什麼是這樣？

編輯：

具有自動寬度divUserContCon的目的是由於這樣的：

divUserCon的大小將被動態地改變，這將有一個背景顏色本身。

divUserContCon將是divUserCon的容器，它本身將具有背景顏色和填充。

所以，如果divUserCon是50px寬，綠色背景，divUserContCon將50px寬（自動）+一些填充，它是背景色。

來源

2012-12-13 ツ.jp

width:50px;

需要放入divUserContCon。你不能依靠auto來只佔用任何子div的寬度。

來源

2012-12-13 14:08:18 monkeymatrix

divUserCon的大小會動態變化。它可以是80像素，90像素等...所以我不能設置寬度或divUserContCon以外的任何東西。 –

好的，將.divuserCon的背景顏色設置爲紅色，然後呢？我們可能需要更多關於你想要做什麼的背景:) – monkeymatrix

我已經將它編輯到主帖子中^^ –

如果你想在你的center然後.divUserCon剛剛在CSS中添加margin: 0 auto;試試這個

<style type="text/css"> 
.divUserRepCont { 
    position: absolute; 
    top: 0; 
    left: 105px; 
    width: 195px; 
    height: 25px; 
} 
.divUserContCon { 
    width: auto; 
    height: 25px; 
} 
.divUserCon { 
    width: 50px; 
    height: 25px; 
    background-color: red; 
} 
</style>

。

來源

2012-12-13 14:10:35 NewUser

查看主版本的修訂，我不能使用該方法。 –

這是我如何解決它：

.divUserRepCont 
{ 
    position: absolute; 

    top: 0; 
    left: 105px; 

    width: 195px; 
    height: 25px; 

    background-color: orange; 
} 

.divUserContCon 
{ 
    display: inline-block; 

    height: 100%; 

    padding-right: 20px; 

    background-color: yellow; 
} 

.divUserCon 
{ 
    display: inline-block; 
    height: 20px; 

    border-top: 5px solid rgb(62, 62, 62); 

    background-color: red; 
}

我取代寬度：自動帶顯示：內聯塊;

來源

2012-12-13 14:26:00

CSS的div寬度自動填充整個父股利

回答

相關問題