0

我想当我展示我失败的尝试时，我会最好地解释自己：

尝试1。margin auto

div {
    height: 50px;
    width: 500px;
    border: 1px solid black;
}

div > img {
    height: 100%;
    display: block;
    margin: 0 auto;
}
<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
</div>

看？我有一个div，我想把这些圆圈div均匀地排列在这个里面。可悲的是，采用目前的方法，他们不会坐在一起，而是将自己堆成一根柱子。

尝试2。flex

div {
    height: 50px;
    width: 500px;
    border: 1px solid black;
    display: flex;
}

div > img {
    height: 100%;
    flex: auto;
}
<div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg"/>
</div>

现在圆圈均匀排列，但纵横比已拧紧。

不，我不能只设置width为所需的值，因为 1）它似乎没有工作 2）即使它工作，它的高度也是div以封闭容器的百分比指定的（这里我指定它px在为了简单起见）所以我不知道放哪个值

有什么方法可以在不破坏纵横比的情况下在 div 中均匀分布圆圈？

4

2 回答 2

1

您几乎可以使用 flexbox 方法。不要让元素增长所以不要将 flex 设置为 auto 这将设置flex-grow:1

div {
  height: 50px;
  width: 500px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
}

div>img {
  height: 100%;
  /*Or margin:auto instead of justify-content: space-around*/
}
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/U%2B25C9.svg" />
</div>

于 2018-10-30T22:53:19.630 回答
0 
div {
    height: 50px;
    width: 500px;
    border: 1px solid black;
    display: flex;
}

div > img {
    height: 100%;
    display: block;
    margin: 0 auto;
}

只使用 flex 但不要在 imgs 上使用 flex: auto ，它工作正常

于 2018-10-30T22:55:36.827 回答