使父div div div中間

我想保留#chat-inner div在#chat-main div的中間，以及我可以通過使用百分比值來做到這一點，但我的問題是應該有2px差距（關於兩個寬度和高度），這個百分比值不能提供。爲了清楚理解，請參閱CSS代碼中的評論。使父div div div中間

JSbin

HTML

<div id="chat-outline"> 
    <div id="chat-main"> 
    <div id="chat-inner"> 
    </div> 
    </div> 
</div>

CSS

#chat-outline 
{background-color:grey;width:30%;height:40%; 
position:fixed;bottom:5px;right:5px; 
padding:2px;} 

#chat-main 
{ 
    width:100%; 
    height:100%; 
    background-color:silver; 
    overflow:hidden; 
} 

#chat-inner 
{ 
    width:95%; 
    height:97%; 

    /*How can I give pixels here? I need 2px value*/ 
    margin:2.5% 2.5% 2.5% 2.5%; 

    /*margin:2px;*/ 

    background-color:cornflowerblue; 
}

來源

2012-11-22 Mr_Green

嘗試是這樣的（demo）：

#chat-outline 
{ background-color:grey;width:30%;height:40%; 
    position:fixed;bottom:5px;right:5px; 
padding:2px;} 

#chat-main 
{ 
    width:100%; 
    height:100%; 
    background-color:silver; 
    overflow:hidden; 
    position:relative; 
} 

#chat-inner 
{ 
    top:2px; 
    bottom:2px; 
    right:2px; 
    left:2px; 
    background-color:cornflowerblue; 
    position:absolute; 
}

來源

2012-11-22 06:31:41

請問'＃聊天inner' DIV將是'＃聊天outline' DIV中甚至在給予不同的職位後？因爲我需要通過點擊按鈕或其他東西來隱藏聊天。 –

＃chat-inner將會去＃chat-outline的任何地方。 –

好，那就是我想要的。謝謝。 –

您可以通過padding達到您想要的結果也： -

#chat-outline 
{background-color:grey;width:30%;height:40%; 
    position:fixed;bottom:5px;right:5px; 
padding:2px;} 

#chat-main 
{ 
    width:100%; 
    height:100%; 
    background-color:silver; 
    overflow:hidden; 
    padding:2px; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 

#chat-inner 
{ 
    width:100%; 
    height:100%; 
    background-color:cornflowerblue; 
}

DEMO

來源

2012-11-22 06:40:26

使父div div div中間

回答

相關問題