Question

因此，当我拉伸或缩小浏览器的宽度时，

所有列将按比例拉伸并填充父容器的宽度100％
水平边距当然也会按比例拉伸
但我希望垂直边距自动匹配水平边距的宽度。

我的标记：

g++ -Wall -W main.cpp -o HelloWorldCPP -lcurl -lnotify

CSS：

/usr/bin/ld: cannot find -lnotify

如果可能，我不想创建额外的标记或使用JavaScript来修复实现此目的。

Answer 1

如果没有必要设置百分比边距，可以尝试设置静态边距（例如20px）和计算宽度（25％ - 20px）;

.parent{
   margin-right: -20px;
}
.child{
   display: inline-block;
   vertical-align: top;
   width: calc(25% - 20px);
   margin-right: 20px;
   margin-bottom: 20px;
   height: 100px;
}

Answer 2

Flexbox＆amp;视口高度解决方案

Codepen link

.container {
    display: flex;
    margin-bottom: 10vh; //Margin bottom of 10% of viewport height applied to the container instead of the item
}

.item {
    height: 100px;
    margin-right: 20px; //Flexbox automatically handels that (may wanna switch off for the last child)
    background-color: tomato;
    flex: 1; //All items take equal width to fill the container
}

P.S。我没有得到你的意思＆＃34;等于水平＆amp;垂直边距＆＃34;，但如果您的意思是水平边距==垂直边距，则将10vh替换为20px.

如何在CSS中实现相等的水平和垂直边距，以及相等的列宽？

2 个答案: