如何添加填充和不改變寬度的邊框（如果使用960網格系統）

我正在使用960.gs grid_3使4行元素和grid_4構成3行元素。我添加了填充到我的grid_3和grid_4。他們不適合在行中，因爲填充添加到寬度。如果我添加邊框，情況也是如此。我明白了，這就是css的工作原理。有沒有解決的辦法？我真的很喜歡4個grid_3元素（或3個grid_4元素）連續填充和邊框。這是添加填充或邊框後獲得的屏幕截圖。圖像顯示邊框大小寫。如何添加填充和不改變寬度的邊框（如果使用960網格系統）

這是代碼：

// HTML

<!DOCTYPE html> 
<html> 
    <head> 
<!-- <link rel="stylesheet" type="text/css" href="css/960_12_col_rtl.css"> --> 
    <link href="css/custom.css" type="text/css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="container_12 clearfix"> 
     <div id="header" class="grid_12"> 
      <h1>HUHUHUHU</h1> 
     </div> 
     <div id="comment1" class="grid_3"> 
      <p>This is comment 1!</p> 
     </div> 
     <div id="comment2" class="grid_3"> 
      <p>This is comment 2!</p> 
     </div> 
     <div id="comment3" class="grid_3"> 
      <p>This is comment 3!</p> 
     </div> 
     <div id="comment4" class="grid_3"> 
      <p>This is comment 4!</p> 
     </div> 

     <div id="leftImage" class="grid_4"> 
      <p id="image1">image1</p> 
     </div>  
     <div id="centerImage" class="grid_4"> 
      <p id="image2">image2</p> 
     </div> 
     <div id="rightImage" class="grid_4"> 
      <p id="image3">image3</p> 
     </div> 
    </div> 
    </body> 
</html>

// CSS：

@import url("960_12_col.css"); 

#header{ 
background-color: blue; 
height: 400px; 
margin-bottom: 30px; 
} 
.grid_4{ 
text-align: center; 
background-color: red; 
margin-top: 30px; 
height: 250px; 
border: 20px solid black; 
} 
.grid_3{ 
/* padding:30px; */ 
border: 5px solid black; 
margin: 10px; 
height: 140px; 
} 
#comment1{ 
text-align: left; 
} 
#comment2{ 
text-align: center; 
} 
#comment3{ 
text-align: center; 
} 
#comment4{ 
text-align: right; 
}

來源

2015-10-27 brumbrum

我們確實需要看到你的html和css。但你有沒有嘗試過'box-sizing：border-box'？ – cocoa

謝謝你停下來。我添加了代碼。不，我現在會看看它 – brumbrum

Thant完美地工作。謝謝！ – brumbrum

這聽起來像你正在尋找的box-sizing財產。

使用值border-box將確保您在CSS中爲元素設置的尺寸包括該元素的填充和邊框。

來源

2015-10-27 17:18:49 Shaggy

如何添加填充和不改變寬度的邊框（如果使用960網格系統）

回答

相關問題