用CSS在列之间放置一个间隙[重复]

Question

我正在创建一个网页，它应该有 3 列，它们之间有空格。

它应该是这样的：

这是它的实际外观：

如何修复我的代码，使网页的列之间有间隙？

我想要一个响应式的 3 列设计（当屏幕宽度低于 600 像素时，它会覆盖所有网页宽度）。我不想要 3 个绝对测量的列。

请注意，我在第三个 div 的末尾有 1 个像素：这是故意的，因为这是使用浏览器查看时的外观。

这是我的 HTML：

<div id="container">
   <div class="squares"></div>
   <div class="squares"></div>
   <div class="squares"></div>
</div>

还有我的 CSS：

#container {
    width: 960px;
}

.squares {
    width: 33.33%;
    height: 250px;
    background: red;
}

Answer 1

您正在尝试实现的目标已经使用引导程序构建，但这里仍然是一个有效的 JSFIDDLE。

CSS：

#container{
  width: 960px;
}

.squares{
  width: calc(98% / 3);
  margin-right: 1%;
  height: 250px;
  float:left;
  background: red;
}

.squares:last-child{
  margin-right: 0%;
}

Answer 2

为您的 Square 添加边距。

.squares{
width: 33.33%;
height: 250px;
background: red;
margin: 10px;
}

Answer 3

我假设因为您的 div 正在触及您正在使用具有边框框的框架。 Here's a fiddle:

.squares{
  width: 33.33%;  
  padding: 5px;
  float: left;
}
.squares div {
    background: red;
    padding: 5px;
}

基本上你做的是对的。问题是网格需要填充和内部对象。始终对网格使用填充，而不是边距，因此数学计算要容易得多。用你想要的任何填充来写 33% 比用 3% 边距右边写 30% 要容易得多。想象一下，如果您决定更改边距，您将不得不重新计算。

Answer 4

您想创建两个新类，分别称为 first 和 last。

首先将类添加到第一个 div，将类最后添加到最后一个 div。

对 div 应用一般的左右内边距，并为它们设置边框大小

然后使用 first 和 last 的类删除填充。

这里是这一切的 jsfiddle：http://jsfiddle.net/b20n6rvt/4/

<div id="container">
  <div class="squares first">
    <div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
  <div class="squares">
    <div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
  <div class="squares last">
    <div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>

CSS：

#container{
  width: 960px;
}

.squares{
  width: 33.33%;  
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  float: left;
}

.squares div {
  background: red;
}

.first { 
  padding-left: 0px;
}

.last { 
  padding-right: 0px;
}

Answer 5

实现这一点的两种方法：

1) 使用display: table:

#container {
  width: 960px;
  display: table;
}
.squares {
  width: 33%;
  height: 250px;
  background: red;
  display: table-cell;
  border-right: solid 25px #fff;
}
.squares:nth-child(3) {
  border: 0;
}

<div id="container">
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
</div>

2) 使用浮点数：

#container {
  width: 960px;
}
.squares {
  width: 29%;
  height: 250px;
  background: red;
  margin: 3%;
  float: left;
}
.squares:nth-child(3) {
  margin-right: 0;
}
.squares:first-child {
  margin-left: 0;
}

<div id="container">
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
</div>

Answer 6

你一切顺利。你真正想要的是让这些方块也成为容器。然后它们可以是第三个宽度，包括填充，这将成为您的“间隙”，通常称为 gutters。

这可能有点矫枉过正，但它是网格系统基础知识的简单指南。 （bootstrap 使用了这种技术，虽然这有点高级。）

有几个步骤可以使这个网格系统工作。

1. 使用无价的* { box-sixing: border-box; } 制作一个盒子模型，其中内边距和边框包含在您的元素宽度和高度中。
2. 创建一个container/wrapper 来保存您的内容。
3. 使用.row 保存您的.column。 .row 应该有 100% 宽度 + 你的排水沟 witdh / 2 作为负边距。 （它们将彼此相邻。）
4. Clearfix你的花车。

Demo

Answer 7

CSS

.squares {
     width: 33.3333%;
     display-:inline-block;
     float;left
      }
.squares + .squares {
    padding-left:5px;
}

在里面创建你的红色块 该正方形将充当网格。

或者你可以用边距替换填充，但是你需要有相等宽度的方块，其中所有方块的宽度 + 边距 = 父容器的宽度。