Html 如何在两个60%的元素之间添加空间&x2B；40%宽度？

标题中很难解释，所以我会详细说明。显然，我知道不能在两个等于容器100%宽度的元素之间添加额外的空间，但我想知道是否有办法将一个元素的宽度减少40px

我很有信心，如果需要的话，我可以用JavaScript来实现，但是如果有一个更简单的css解决方案，我更愿意使用它

为了进一步解释，我想在这张图中看到的两个白色元素之间加上一个40px：

正如你所看到的，我有一个左右列的大容器，宽度分别为40%和60%

HTML:

用于将

宽度减少固定量

calc（）CSS函数可以在
，
的任何位置使用，
，
，
或
是必需的。使用calc（），您可以
可以执行计算以确定CSS属性值

您可以减小其中一个的宽度：

.homeContentContainer {
    position: absolute;
    width: calc(60% - 40px);
    margin: 0 auto;
    top: 70px;
    left: 0px;
    right: 0px;
}

或在两个元素之间分割差异：

.homeContentContainer {
    position: absolute;
    width: calc(60% - 20px);
    margin: 0 auto;
    top: 70px;
    left: 0px;
    right: 0px;
}

.leftCol {
    width: calc(40% - 20px);
    height: 100%;
    float: left;
}

用于将
宽度减少固定量

calc（）CSS函数可以在
，
的任何位置使用，
，
，
或
是必需的。使用calc（），您可以
可以执行计算以确定CSS属性值

您可以减小其中一个的宽度：

.homeContentContainer {
    position: absolute;
    width: calc(60% - 40px);
    margin: 0 auto;
    top: 70px;
    left: 0px;
    right: 0px;
}

或在两个元素之间分割差异：

.homeContentContainer {
    position: absolute;
    width: calc(60% - 20px);
    margin: 0 auto;
    top: 70px;
    left: 0px;
    right: 0px;
}

.leftCol {
    width: calc(40% - 20px);
    height: 100%;
    float: left;
}

你也可以用一个。看看这个例子：


.container{
显示：网格；
背景色：#eee；
高度：200px；
/*这使得.左宽度为40%，右宽度为60%*/
网格模板列：40%60%；
栅极间隙：40px；/*40px左右之间的间隙*/
宽度：60%；
保证金：0自动；
文本对齐：居中；
}
.左{
背景颜色：黄色；
}
.对{
背景颜色：橙色；
}

左边
赖特
您也可以使用一个。看看这个例子：


.container{
显示：网格；
背景色：#eee；
高度：200px；
/*这使得.左宽度为40%，右宽度为60%*/
网格模板列：40%60%；
栅极间隙：40px；/*40px左右之间的间隙*/
宽度：60%；
保证金：0自动；
文本对齐：居中；
}
.左{
背景颜色：黄色；
}
.对{
背景颜色：橙色；
}

左边
赖特
可以使用网格间隙代替边距；）可以使用网格间距代替边距；）只是想知道为什么不只是让百分比变小，然后根据容器大小手动计算像素？我问这个问题的唯一原因是很多浏览器都不支持calc（），所以根据您的目标受众的不同，它可能无法在其中一些浏览器上工作。只是好奇：）@grimesd-calc现在被所有浏览器支持。只有仍在使用的旧版本IE缺乏支持。@ori drori感谢您的澄清，只是想知道为什么不只是缩小百分比并根据容器大小手动计算像素？我问这个问题的唯一原因是很多浏览器都不支持calc（），所以根据您的目标受众的不同，它可能无法在其中一些浏览器上工作。只是好奇：）@grimesd-calc现在被所有浏览器支持。只有仍在使用的IE的旧版本缺乏支持。@ori drori感谢您的澄清