三个 div 并排,中间有间距

Three divs side by side with spacing in between

我试图让三个 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 中间没有我需要的间距。

两者之间的差距是可变的,或者宽度不能总是 33%(3x33% + 2x10px 可以是 more/less 然后是视口)。

那么代码就简单了:

#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% 更改为 width: calc((100% - 20px) / 3);

您最好使用 flexbox 来实现您的需要。为三个 .box div 创建一个容器,并使用以下样式设置它的样式:

display:flex;
justify-content:space-between;

请记住,需要降低 .box div 的宽度才能达到您想要的 space,而您不需要 float:left;在 css.

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

这是我用您正在寻找的解决方案制作的 plunker。使其工作的代码如下。我确信 flexbox 可能有更简单的解决方案,但这适用于不支持 flexbox 的旧浏览器(看着你,IE <= 9)。请注意我是如何在 .box 元素之间包含注释的。这是因为没有它们,在进行 inline-block 宽度计算时会包含空格,并且最后一个元素最终换行到下一行。希望这对您有所帮助!

.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);
  }

easy 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>

我认为正确答案只对了一半弹性项目的默认行为设置为flex-grow 1,因此,如果需要物品,他们会额外收取 space。

需要删除该行为,这样项目就不会变大或变小。

请参阅下面的代码段。

.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>