Question

我使用960.gs grid_3来生成一行4个元素，使用grid_4来生成一行3个元素。我在grid_3和grid_4中添加了填充。它们不再适合行，因为填充被添加到宽度。如果我添加边框也会发生同样的情况我明白了，这就是css的工作原理。有没有解决的办法？我真的很喜欢连续填充和边框的4个grid_3元素（或3个grid_4元素）。这是我添加填充或边框后得到的屏幕截图。图像显示边框大小。

这是代码：

// 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;
}

Answer 1

听起来你正在寻找box-sizing财产。

使用值border-box将确保您在CSS中为元素设置的尺寸包含该元素的填充和边框。

如果使用960网格系统，如何添加不改变宽度的填充和边框

1 个答案: