Question

我希望父div的宽度取决于一行中可以容纳多少行内嵌块。但是，当父div的宽度达到100％，而另一个框的宽度太宽而无法容纳在第一行时，它就会下降。没关系，但是父对象的宽度也应该缩短一点，并使其水平居中对齐，这样就看不到不需要的空间。这里是codepen。 https://codepen.io/anon/pen/aXJLQN

如果盒子的宽度小于200，则可以正常工作，但是当！将宽度增加到200，右边则没有多余的空格。

HTML：

<div class="hello">
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
</div>

CSS：

.hello{
   background: red;
   display: table;
   width: auto;
   margin: 0 auto;
}
.hi{
   display: inline-flex;
   width:200px;
   height:170px;
   margin: 10px;
   background: blue;
}

Answer 1

我提供了父母display: flex;和justify-content: center; 这将为您提供帮助。

.hello{
  background: red;
  display: flex;
  width: auto;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.hi{
  display: inline-flex;
  width:200px;
  height:170px;
  margin: 10px;
  background: blue;
}

<div class="hello">
  <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
   <div class="hi"></div>
  
</div>

如何使DIV的宽度取决于其内容然后对齐中心？

1 个答案: