Question

好的，我有一个有多个孩子的div元素。当窗口展开时，我希望孩子们在div中没有任何空间的情况下整齐地适应网格的下一个可用空间。当div与窗口一起扩展时，div的右侧有很多额外的空间，在它刚刚添加另一列之前就没有必要了。我不知道如何在保持内容浮动的同时使div居中，并且div只有内容所需的宽度。

.wrapper{
  display:inline-block;
  width:auto;
  text-align:center;
  border:solid black 5px;
  margin:10px auto;
}

.wrapper > *{
 margin: 0 auto;
 border:solid black 1px;
 text-align:center;
 display:inline-block;
 float:left;
 width:150px;
 height:150px;
 margin: 0px 10px 10px 10px;
}

我尝试了多个具有块元素/内联块元素的组合，这样无济于事。

我很抱歉，如果我解决问题的工作非常糟糕，但是当你看到小提琴时它可能更有意义。

https://jsfiddle.net/rfzk5fhx/

Answer 1

我不确定我是否正确地提出了您的问题但是如果您希望容器div根据您的内容调整宽度和高度，您可以通过将显示设置为内联块并删除宽度和高度来实现

以下是代码：

ul {
    background: #aaa;
    padding: 10px;
    display: inline-block;
    margin:10px auto;
}

这是更新的小提琴 - https://jsfiddle.net/rfzk5fhx/2/

如何动态地将div宽度调整为内容，同时保持居中并让内容浮动？

1 个答案: