gpt4 book ai didi

php - 流体/液体布局 - 多列,两侧都有填充/边距

转载 作者:行者123 更新时间:2023-11-28 13:18:57 25 4
gpt4 key购买 nike

我正在尝试创建一个包含多个列的响应式布局,列的两侧各有 16 像素的内边距/外边距。

如果我有 3 列,自然每列的宽度将设置为 33%,但是,每列之间有 16px 的间隙,这就超过了 100%。

使用 CSS、JavaScript 或 PHP...我怎样才能实现这一点?

body {
font: 0.75em Arial, Helvetica, san-serif;
background: #CCC;
}
p {margin-bottom: 12px;}
h1 {
font: 1.25em Arial, Helvetica, san-serif;
font-weight: bold;
color: teal;
text-transform: uppercase;
margin-bottom: 12px;
}

#wrapper {
background: #FFF;
width: 75%;
margin: 0 auto;
padding: 32px;
}

.one-third {???}

http://jsfiddle.net/Jed8D/

谢谢。

最佳答案

可以通过 css3 中的 calc 函数轻松完成。试试这个:

.one-third {
width: calc((100% - 32px) / 3); //Where 100% is the width of container - 32px is the margin between two columns (16px + 16px) - 3 is the number of columns
float: left;
margin-right: 16px;
}

.one-third:nth-child(3n+3){
margin-right: 0px;
}

您可以使用 calc() 来计算像素大小或 css 中的百分比。并且第 nth-child 将有助于从每三列中删除边距(假设您可能有更多多个 3 列行)。

关于php - 流体/液体布局 - 多列,两侧都有填充/边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14809168/

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