三个div并排，中间有间距

Question

我试图将三个div并排放在中间的div之间。

以下是我需要的图片：

这是我目前的代码：

<style>
  .box {
    float: left;
    width: 33%;
    background-color: red;
    text-align: center;
    color: #fff;
  }
</style>

<div class="box">Div 1</div>
<div class="box">Div 2</div>
<div class="box">Div 3</div>

我当前代码的问题是它在div 1和2以及div 2和3的中间没有我需要的间距。

Answer 1

使用flexbox可能会更好地实现您的需求。为三个.box div创建一个容器，并使用以下内容对其进行样式设置：

data

请记住，您的.box div的宽度需要降低才能达到您想要的空间，并且您不需要浮动：left;在css。

有关flexboxes的更多信息，请单击此处：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

之间的差距是可变的，或者宽度不能总是33％（3x33％+ 2x10px可以比视口更多/更少）。

然后代码很简单：

#wrapper {background: red;}
.inner {width: 33%; margin: 0 auto; background: green;}
.left {float: left;}
.right {float: right;}

<div id=wrapper>
  <div class="inner left">inner left</div>
  <div class="inner right">inner right</div>
  <div class="inner">inner middle</div>
</div>

如果宽度应该是可变的且div之间的差距始终为10px，则更改width: 33%的{​​{1}}。

Answer 3

这是我用你正在寻找的解决方案制作的plunker。使它工作的代码如下。我相信使用flexbox可能会有一个更简单的解决方案，但这适用于不支持flexbox的旧浏览器（看着你，IE＆lt; = 9）。请注意我是如何在.box元素之间包含注释的。这是因为没有它们，在进行内联块宽度计算时会包含空格，最后一个元素最终会换行到下一行。希望这有帮助！

.box {
    width:calc(33.3333333% - 10px);
    display:inline-block;
    background:#777;
    margin:0 10px;
    text-align:center;
  }

  .box:first-child, .box:last-child {
    margin:0;
    width:calc(33.333333% - 5px);
  }

Answer 4

简单 CSS网格解决方案怎么样：

.container {
  display: grid;
  grid-gap: 10px;  /* Simply adjust this value !*/
  grid-template-columns: repeat(3, 1fr); /* OR grid-template-columns: 1fr 1fr 1fr;*/
  grid-auto-rows: 1fr;
  border:1px solid green 
}

.container>div {
  border: 1px solid red;
  height: 20px;
}

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

Answer 5

我认为正确答案只有一半，弹性项目的默认行为设置为flex-grow 1，因此如果需要项目，他们将占用额外的空间他们需要它。

需要删除该行为，以使项目不会增长或缩小。

请参阅下面的代码段。

.grid {
  display: flex;
  justify-content: space-betwen;
}

.grid .item {
  border: 2px solid tomato;
}

.grid .item2 {
  color: red;
  border: 2px solid blue;
  flex: 0 0 33%;
}

<div class="grid">
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque itaque id unde rerum et, ipsa iusto placeat, tempora cupiditate cumque sapiente nostrum, suscipit quidem consectetur totam commodi qui quis doloremque? Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Laudantium quos error voluptatum atque veniam earum culpa, odio impedit minima quis quia id! Consequuntur adipisci id distinctio! Voluptas pariatur quasi accusamus!</div>
  <div class="item">Same Content</div>
  <div class="item">Same Content</div>
</div>

<br>

<div class="grid">
  <div class="item2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque itaque id unde rerum et, ipsa iusto placeat, tempora cupiditate cumque sapiente nostrum, suscipit quidem consectetur totam commodi qui quis doloremque? Lorem, ipsum dolor sit amet consectetur
    adipisicing elit. Laudantium quos error voluptatum atque veniam earum culpa, odio impedit minima quis quia id! Consequuntur adipisci id distinctio! Voluptas pariatur quasi accusamus!</div>
  <div class="item2">Same Content</div>
  <div class="item2">Same Content</div>
</div>