Мне нужно какое-то решение для регулировки ширины контейнера в соответствии с шириной детей, когда дети находятся на нескольких строках. Когда дети находятся в одной строке, display: inline-block для элемента контейнера делает то, что мне нужно. Но когда они находятся в нескольких строках, контейнер ведет себя так же, как 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;
}
0
Pavel Němec 27 Ноя 2016 в 22:12

2 ответа

Лучший ответ

Пожалуйста, проверьте это:

#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;
}

Вот пример: Образец

Нажмите на начальную страницу и посмотрите страницу, когда я думаю, что это то, что вы хотите.

1
Farzin Kanzi 27 Ноя 2016 в 22:12
#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;
}
<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>
0
Yevhen 27 Ноя 2016 в 20:04