Html 如何设置宽度为33%的列之间的边距？_Html_Css

Html 如何设置宽度为33%的列之间的边距？

html css

Html 如何设置宽度为33%的列之间的边距？,html,css,Html,Css,我认为有很多类似的问题，但我没有找到一个好的解决办法。我有一个容器，其中包含3列，宽度为33%。我想增加他们之间的差距像截图。我尝试这样做： HTML: 但最后一列移到新行。如何在不改变宽度的情况下在块之间添加空间您可以在列宽上使用以下方法： .column{ width: calc(33.33% - 20px); /* ------------------^^define margin vlaue*/ } 在使用calc方法之前，请查看但实际上，如果我在编码，我不会使用

我认为有很多类似的问题，但我没有找到一个好的解决办法。我有一个容器，其中包含3列，宽度为33%。我想增加他们之间的差距像截图。

我尝试这样做：

HTML:

但最后一列移到新行。如何在不改变宽度的情况下在块之间添加空间

您可以在列宽上使用以下方法：

.column{
   width: calc(33.33% - 20px);
   /* ------------------^^define margin vlaue*/
}

在使用calc方法之前，请查看

但实际上，如果我在编码，我不会使用它，因为我只会将宽度从33.33%减少到30%左右。

您可以对列的宽度使用以下方法：

.column{
   width: calc(33.33% - 20px);
   /* ------------------^^define margin vlaue*/
}

在使用calc方法之前，请查看

但实际上，如果我在编码，我不会使用它，因为我会简单地将宽度从33.33%减少到30%左右。

显然，列的宽度必须小于容器的33%，因为在某些情况下，您要添加20px的边距。当然，除非40px正好等于宽度的1%

我想你想要的是，在添加边距后，列的大小是相等的…所以剩余宽度的33%

Flexbox可以做到这一点

IE10及以上吗

*{
保证金：0；
填充：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.集装箱{
宽度：500px；
边框：3倍纯红；
溢出：隐藏；
填充：20px0；
显示器：flex；
证明内容：之间的空间；
保证金：自动；
}
.栏目{
弹性：1；
高度：200px；
背景：#ccc；
文本对齐：居中；
}
.列：第n个子项（2）{
利润率：0.20px；
}


第1栏
第2栏
第3栏

显然，列的宽度必须小于容器的33%，因为在某些情况下要添加20px的边距。当然，除非40px正好等于宽度的1%

我想你想要的是，在添加边距后，列的大小是相等的…所以剩余宽度的33%

Flexbox可以做到这一点

IE10及以上吗

*{
保证金：0；
填充：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.集装箱{
宽度：500px；
边框：3倍纯红；
溢出：隐藏；
填充：20px0；
显示器：flex；
证明内容：之间的空间；
保证金：自动；
}
.栏目{
弹性：1；
高度：200px；
背景：#ccc；
文本对齐：居中；
}
.列：第n个子项（2）{
利润率：0.20px；
}


第1栏
第2栏
第3栏

好友。。你的20%不起作用，因为它不等于100%。！尽管如此，如果你想要一些相等的利润，这是你可以得到的

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
宽度：500px；
边框：3倍纯红；
溢出：隐藏；
填充：20px0；
}
.栏目{
宽度：33%；
浮动：左；
高度：200px；
背景：#ccc；
文本对齐：居中；
}
.列+.列{
左缘：0.33%；
}


第1栏
第2栏
第3栏

好友。。你的20%不起作用，因为它不等于100%。！尽管如此，如果你想要一些相等的利润，这是你可以得到的

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
宽度：500px；
边框：3倍纯红；
溢出：隐藏；
填充：20px0；
}
.栏目{
宽度：33%；
浮动：左；
高度：200px；
背景：#ccc；
文本对齐：居中；
}
.列+.列{
左缘：0.33%；
}


第1栏
第2栏
第3栏

这是代码，现在我们需要3个相等的列正确排列。因此，使用30.5%而不是33%，因为填充将获得剩余空间

<html>
<head>
<style>
.container {
    width: 500px;
    border: 3px solid red;
    overflow: hidden;
    padding: 20px ;
}

.column {
    width: 30.5%;
    float: left;
    height: 200px;
    background: #ccc;
    text-align: center;
    margin-left: 20px;
}

.column:first-child {
    margin: 0;
}
</style>
</head>
<body>
<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
</div>
</body>
</html>


.集装箱{
宽度：500px；
边框：3倍纯红；
溢出：隐藏；
填充：20px；
}
.栏目{
宽度：30.5%；
浮动：左；
高度：200px；
背景：#ccc；
文本对齐：居中；
左边距：20px；
}
.专栏：第一个孩子{
保证金：0；
}
第1栏
第2栏
第3栏

这是代码，现在我们需要3个相等的列正确排列。因此，使用30.5%而不是33%，因为填充将获得剩余空间

<html>
<head>
<style>
.container {
    width: 500px;
    border: 3px solid red;
    overflow: hidden;
    padding: 20px ;
}

.column {
    width: 30.5%;
    float: left;
    height: 200px;
    background: #ccc;
    text-align: center;
    margin-left: 20px;
}

.column:first-child {
    margin: 0;
}
</style>
</head>
<body>
<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
</div>
</body>
</html>


.集装箱{
宽度：500px；
边框：3倍纯红；
溢出：隐藏；
填充：20px；
}
.栏目{
宽度：30.5%；
浮动：左；
高度：200px；
背景：#ccc；
文本对齐：居中；
左边距：20px；
}
.专栏：第一个孩子{
保证金：0；
}
第1栏
第2栏
第3栏

您可以在每列中添加一个内部div以控制边距：


.集装箱{
宽度：500px；
边框：1px实心#ddd；
}
.栏目{
宽度：33.3%；
浮动：左；
填充：20px；
框大小：边框框；
}
.column\uuu-inner{
背景色：#ddd；
高度：200px；
}
第1栏
第1栏
第1栏

您可以在每列中添加一个内部div以控制边距：


.集装箱{
宽度：500px；
边框：1px实心#ddd；
}
.栏目{
宽度：33.3%；
浮动：左；
填充：20px；
框大小：边框框；
}
.column\uuu-inner{
背景色：#ddd；
高度：200px；
}
第1栏
第1栏
第1栏

最大宽度为100%，每列使用1/3的宽度。那你怎么用保证金呢？您应该减少列的宽度使

宽度：30.33%在.列中class@niyasc，是的，我知道，我尝试设置填充，但我需要将第一列固定在左侧，最后一列固定在右侧。所有列的宽度必须相同。是否可以在此处使用flexbox帮助？是否可以修改html？如果是，那么您可以使用此方法引导策略
最大宽度为100%，并且您的每列使用1/3的宽度。那你怎么用保证金呢？您应该减少列的宽度使宽度：30.33%在c列中