不能有div填充除邊界外的其他div

嘿所以我想創建一個嵌套的div元素，以便它位於另一個div元素中，但完全填充它的父項，除了圍繞它的完美邊框，30像素左右像這樣http://s23.postimg.org/su2o83m7v/div.png 不能有div填充除邊界外的其他div

我試過填充，邊距和用css定位，但似乎不能保持其寬度和填充的底部，有什麼建議嗎？

來源

2014-02-07 Jim Jones

分享你的代碼...... –

想在這裏看到一些html和css，更好地做一個小提琴 – Rex

http://jsfiddle.net/62Mjt/我不知道它的我的互聯網使它不顯示或如果我只是爲小提琴 –

有兩種方法可以解決這個問題。

1）箱上漿

.OuterDiv { 
    box-sizing:border-box; 
    border:30px solid green; 
} 

.InnerDiv { 
    background-color:red; 
    border:4px solid blue; 
}

Here is the jsFiddle for it.

2）位置絕對

.OuterDiv { 
    position:relative; 
    height:100px; 
    background-color:green; 
} 

.InnerDiv { 
    position:absolute; 
    top:30px; 
    left:30px; 
    right:30px; 
    bottom:30px; 
    background-color:red; 
    border:4px solid blue; 
}

Here is the jsFiddle for that.

個人而言，我會選擇第一個選項一週內的任何一天（地獄更容易維護，真的是ou應該使用box-sizing:border-box;來表示所有內容），但是如果你急需IE7支持，那麼第二個將會在那裏工作，而第一個只有IE8 +。

來源

2014-02-07 04:51:04 PlantTheIdea

謝謝語法錯誤，但我想要一個div邊框的原因是，我可以在「邊框」周圍有邊框，無論如何要做到這一點？ –

你的意思是內框周圍有邊框？默認情況下，邊框將圍繞該內框的邊框，我更新了我的答案和jsFiddle來展示我的意思。 – PlantTheIdea

外部，但我想這也可以，我正在研究'display：inline-block'，如果這樣做不行，請使用您的解決方案。謝謝！ –

嘗試下面的代碼

<html> 
    <head> 
     <style> 
     .outer{ 
     height:200px; 
     width:200px; 
     padding:30px; 
     background-color:#ff0000; 
     } 
     .inner{ 
      height:100%; 
      width:100%; 
      background-color:#00FF00; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="outer"> 
     <div class="inner"> 
     </div> 
     </div> 
    </body> 
    </html>

我給的30像素的外層div填充和其餘是簡單剛纔高度&寬度100％使用背景顏色，以顯示在div不同

來源

2014-02-07 04:59:00 sanjeev

我發現這太工作，以及

#parent 
{ 
    border:1px solid black; 
    background:#ddd; 
    display:inline-block; 
} 

#child 
{ 
    width:180px; 
    margin:30px; 
    background:grey; 
}

http://jsfiddle.net/Y37su/

來源

2014-02-07 05:15:50

不能有div填充除邊界外的其他div

回答

相關問題