Question

我想要一些解决方案，当孩子在多条线上时，根据孩子的宽度调整容器的宽度。当孩子只在单行上时，然后显示：容器元素的内联块使我需要的东西。但是当它们在多行上时，容器的行为与display：block一样。

我所知道的只有两个解决方案： 1）将容器最大宽度设置为子宽度的倍数。但它不是一种通用的解决方案（我的意思是在分辨率较低的设备上显示）。

2）使用jQuery计算容器宽度。但我更喜欢使用一些纯HTML / CSS解决方案。

HTML：

 <div id="wrapper1">     
    <div id="wrapper2">                
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>          
       <div class="el">
       </div>        
    </div>         
</div> 


  <div id="wrapper2">                
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>          
    <div class="el">
    </div>        
  </div>         
</div>

CSS：

#wrapper1{
  max-width:1200px;
  margin:auto;
}
#wrapper2{
  background: #FF0;
  display:inline-block;
}
.el{
  float:left;
  margin:10px;
  width:200px;
  height:200px;
  background:#00F;
}

Answer 1

请测试一下：

#wrapper1{
display: -webkit-flex; 
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;  
flex-wrap: wrap;
justify-content: center;
-webkit-justify-content: center;
}

#wrapper2{
max-width:880px;
display: -webkit-flex; 
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;  
flex-wrap: wrap;
justify-content: space-between;
-webkit-justify-content: space-betweeen;
}

以下是一个示例： Sample

点击开始页面，在我认为这就是您想要的内容后查看页面。

Answer 2

＆＃13;

#wrapper1{
    width:1200px;
}
#wrapper2{
    display:inline-block;
}
.el{
    width:200px;
    height:200px;
    background:#00F;
}
.ul{
    padding: 20px;
    float:left;
    width:200px;
    height:200px;
    background: #FF0;
}

＆＃13;

<div id="wrapper1">
  <div id="wrapper2">
    <div class="ul">
      <div class="el"></div>
    </div>
    <div class="ul">
      <div class="el"></div>
    </div>
    <div class="ul">
      <div class="el"></div>
    </div>
    <div class="ul">
      <div class="el"></div>
    </div>
    <div class="ul">
      <div class="el"></div>
    </div>
    <div class="ul">
      <div class="el"></div>
    </div>
    <div class="ul">
      <div class="el"></div>
    </div>
    <div class="ul">
      <div class="el"></div>
    </div>
  </div>
</div>

＆＃13;

当儿童在多线

2 个答案: