如何在不使用百分比的情况下自动在div之间添加间距？

Question

我有几个水平对齐的div。 如何自动调整它们之间的间距，以便在调整屏幕大小或添加另一个div时，div之间的间距相等。

屏幕宽度为600px时的示例：

屏幕宽度为330px时的示例：

希望我的解释足够好。

感谢您的帮助！

Answer 1

Flexbox 可以执行https://jsfiddle.net/2Lzo9vfc/210/

<强> HTML

<div class="content">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>

<强> CSS

.content {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    width: 100%;
}

.box {
    background: black;
    padding: 25px;
    color: white;
}

Answer 2

您可以在这里找到flexbox的解决方案：

.container {
    display:flex;
    justify-content:space-between;
}
.item {
    background:#000;
    height:50px;
    width:120px;
}

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

有关使用flexbox的更多信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

您可以使用flexbox，只需将这些属性应用于div的容器：

.container {
  display: flex; 
  justify-content: space-between;
}

Answer 4

您可以使用inline-block + text-align:justify;为较旧的浏览器生成:after或flex + justify-content:space-betwween;

以外的最后一条隐藏线

.ib {
text-align:justify;
  }
.ib:after {
  content:'';
  display:inline-block;
  width:99%;
  }
.flex {
  display:flex;
  justify-content:space-between;
  }
.d100 {
  width:100px;
  height:2em;
  background:blue;
  display:inline-block;
  }

<div class="ib">
  <div class="d100"></div>
  <div class="d100"></div>
  <div class="d100"></div>
  </div>
<div class="flex">
  <div class="d100"></div>
  <div class="d100"></div>
  <div class="d100"></div>
  </div>

Answer 5

使用flex声明 - 请参阅此处：http://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 6

你可以使用flexbox，这个解决方案适用于IE 10+和最新的其他浏览器。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 7

选项1：添加与背景颜色相同的边框

选项2：添加背景色div并将显示设置为内联