Question

我有一个类似的HTML：

<div class="parent">
  <div class="child size3"></div>
  <div class="child size2"></div>
  <div class="child size2"></div>
  <div class="child size2"></div>
  <div class="child size1"></div>
</div>

父div是100％宽度的单个水平线。

现在在不同的条件下可能会显示3个孩子，可能是4个或者5个。我希望孩子们保持他们的体型，但是根据孩子的数量，我希望孩子们在他们之间动态地拥有空间以占据全宽父母div。

注意：结构实际上并非如此简单。每个子div可能根据条件具有不同的大小，因此动态边距是我正在寻找的。为了角度使用，每个子div都有一棵树，因此将css应用于子类是不可取的。

我可以向父母div申请什么财产以便动态调整子女之间的差额？请帮忙。

修改我已经尝试过flex模块，但正如我所说，每个孩子都拥有它自己的dom树，因此可能不是父div的直接孩子。在这种情况下，孩子被压扁到一个小的尺寸和＃34;尺寸＆＃34;财产丢失了。

Answer 1

看看这个codepen https://codepen.io/anon/pen/dJJzGZ

.parent {
  display: flex;
  flex-direction: row;
  width: 500px;
  justify-content: space-evenly;
}

您只需要使用flex

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#justify-content

你对IE11有一些小错误，但总的来说它工作正常

https://caniuse.com/#search=flex

Answer 2

您可以使用：

  .parent 
{
  display: -moz-flex; //for browser compatibilty
	display: -ms-flexbox; //for browser compatibilty
	display: -webkit-flex; //for browser compatibilty
	display: flex;
  flex-direction: row; //Use browser prefix for this
  width: 500px;
  justify-content: space-evenly; //use browswer prefix
}

动态地隔开儿童div占据父div的全宽

2 个答案: