gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 11:14:07 25 4
gpt4 key购买 nike

我使用 960.gs grid_3 制作一行 4 个元素,使用 grid_4 制作一行 3 个元素。我在 grid_3 和 grid_4 中添加了填充。它们不再适合行,因为填充被添加到宽度。如果我添加边框,也会发生同样的情况。我明白了,这就是 css 的工作原理。有没有解决的办法?我真的很想要 4 个 grid_3 元素(或 3 个 grid_4 元素),并带有填充和边框。这是我添加填充或边框后得到的屏幕截图。该图像显示边界大小写。

enter image description here

这是代码:

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

最佳答案

听起来您正在寻找 box-sizing属性(property)。

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

关于html - 如果使用 960 网格系统,如何添加不改变宽度的填充和边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33373971/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com