Question

假设我有一个div，100px宽，以及一个可变数字（从1到6）的元素，10px宽，在div内。

我怎样才能将它们平均分开以便：

如果里面有1个元素，则不会有额外的间距

如果有2到6个元素，则每个元素之间的间距为80px（2），35px（3），20px（4）等......

第一个项目将始终位于最左侧位置，没有填充，最后一个项目将始终位于最右侧位置，也没有填充。

我不关心IE，所以这可能是CSS3。无论如何，我关注javascript。我知道这将是JS中的一个内容，但我当然希望尽可能避免它，所以如果你要发布一个JS解决方案，请不要回答。

此致

编辑：

示例：http://codepen.io/anon/pen/wbiFA

HTML

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

CSS：

.container {
  width: 900px;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
  height: 50px;
}

.item {
  border: 1px solid blue;
  flex-basis: auto;
  width: 171px
}

好的，做到了：）

Answer 1

您不需要灵活盒子等CSS3功能。以下CSS2.1功能就足够了：

text-align:justify
display: inline-block
::after伪元素

.container {
  width: 900px;
  border: 1px solid red;
  height: 50px;
  text-align: justify;
}
.container:after {
  content: '';
  width: 100%;
  display: inline-block;
}
.item {
  border: 1px solid blue;
  width: 171px;
  height: 100%;
  display: inline-block;
}

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

Answer 2

使用Flexbox我得到了足够接近的结果：

http://codepen.io/coljung/pen/bufmh

.container {
   border: 1px solid red;
   width:1000px;
   height:100px;
   display: flex;
   justify-content:  space-around;
}

.item {
  border: 1px solid blue;
  background:red;
  width:100px;
  height:100%;
}

现在，它无法实现您正在寻找的精确填充。在这种情况下，你必须为每一个案例手动完成。

div中元素之间的相等分隔

2 个答案: