Question

我认为这是很多类似的问题，但我还没有找到一个好的解决方案。我有一个容器，其中包含3列，宽度为33％。我想像截图一样在它们之间添加边距。

我试试：

HTML：

<div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
</div>

CSS：

.container {
    width: 500px;
    border: 3px solid red;
    overflow: hidden;
    padding: 20px 0;
}

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

.column:first-child {
    margin: 0;
}

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

JSFiddle

Answer 1

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

我怀疑你所追求的是在添加边距之后相等的列所以剩余宽度的33％。

Flexbox 可以做到这一点。

Flexbox Support是IE10及以上

＆＃13;
＆＃13;
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { width: 500px; border: 3px solid red; overflow: hidden; padding: 20px 0; display: flex; justify-content: space-between; margin: auto; } .column { flex: 1; height: 200px; background: #ccc; text-align: center; } .column:nth-child(2) { margin: 0 20px; }
＆＃13;
<div class="container"> <div class="column">Column 1</div> <div class="column">Column 2</div> <div class="column">Column 3</div> </div>
＆＃13;
＆＃13;
＆＃13;

Calc解决方案

Calc Support是IE9及以上

正如其他答案所述，calc可用于定义列的宽度，同时考虑所需的边距。

＆＃13;
＆＃13;
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { width: 500px; border: 3px solid red; overflow: hidden; padding: 20px 0; display: flex; justify-content: space-between; margin: auto; } .column { float: left; height: 200px; background: #ccc; text-align: center; width: calc((100%-40px)/3); } .column:nth-child(2) { margin: 0 20px; }
＆＃13;
<div class="container"> <div class="column">Column 1</div> <div class="column">Column 2</div> <div class="column">Column 3</div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以在列的宽度上使用calc方法：

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

在使用calc方法之前，请查看can i use calc。

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

Answer 3

伙计......你的20％不会工作，因为它不能达到100％。不过，如果你想要一些相同的保证金，这就是你能得到的。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 500px;
  border: 3px solid red;
  overflow: hidden;
  padding: 20px 0;
}
.column {
  width: 33%;
  float: left;
  height: 200px;
  background: #ccc;
  text-align: center;
}
.column+.column {
margin-left:0.33%;
}

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

Answer 4

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

callWebservice()

Answer 5

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

＆＃13;

<html>
<head>
<style>
.container {
    width: 500px;
    border:1px solid #ddd;
}

.column {
    width: 33.3%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
}
 .column__inner {
    background-color: #ddd;
    height: 200px;
  }


</style>
</head>
<body>
<div class="container">
    <div class="column">
      <div class="column__inner">Column 1</div>  
    </div>
    <div class="column">
      <div class="column__inner">Column 1</div>  
    </div>
  <div class="column">
      <div class="column__inner">Column 1</div>  
    </div>
</div>
</body>
</html>

＆＃13;

如何在宽度为33％的列之间设置边距？

5 个答案: