2

Есть div у которого стоят такие свойства:

   #main_div{

        position: absolute;
        padding: 5px 14px 15px 0px;
        top: 50px;
        box-sizing: border-box;
        max-width: 350px;
        flex-flow: row wrap;
  }

в него по клику добавляются элементы с такими свойствами:

  #div {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16px;
        width: 67px;
        margin-top: 10px;
  }

почему происходит сразу перенос на новую строку #div, а не когда ширина #main_div достигнет 350px и только потом перенос на новую строку.

2 ответа 2

2
  1. Забыли задать #main_div display: flex;

  2. Если будет несколько блоков внутри, то стоит задавать класс, а не id

$('#main_div').on('click', function(){
  var $this = $(this),
      box = '<div class="div">Lorem ipsum.</div>';
  
  $this.append(box);
});
* {
  box-sizing: border-box;
}

#main_div{
  position: absolute;
  padding: 5px 14px 15px 0px;
  top: 50px;
  box-sizing: border-box;
  max-width: 350px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  
  background: #eee;
  cursor: pointer;
}

.div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  width: 67px;
  margin-top: 10px;
  
  background: #000;
  color:#fff;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<span>Кликните на блок ниже &darr;</span>
<div id="main_div">
  
</div>

4
  • Но блок уже шириной 350px, а мне нужно чтобы это было постепенно, то есть сначала там один элемент, и он шириной допустим 100 px, потом 2 элемента и шириной 200 px. потом 3 элемента и шириной 300px, но потом уже элементы переносились на другую строку 22 дек 2017 в 15:49
  • все переносится, поправила ответ, что теперь по клику добавляются. 4-ый уже не влазит и начинает переноситься
    – SVE
    22 дек 2017 в 15:56
  • Так он изначально шириной большой, мне нужно чтобы был перенос, только когда достигнет max-width 22 дек 2017 в 16:35
  • @ЭльдарГучеренко, мне кажется Вы сами не понимаете чего хотите!!
    – SVE
    22 дек 2017 в 16:42
1

Это больше длинный комментарий, чем ответ. Совет, - чтобы можно было дать более внятный и конструктивный ответ, судя по комментариям под ответом HamSter, советую добавить весь код. Но из того примера, что есть, можно сказать так. Ты добавляешь несколько элементов #div.
ID это уникальный идентификатор.

<div id="div"></div>

И не может быть несколько элементов с таким ID

<div id="div"></div>
<div id="div"></div>
<div id="div"></div>

Вот такая конструкция неправильная

У элемента может быть несколько классов. Например

<div class="div wrapper main-wrapper"> </div>

Один класс может быть у нескольких элементов Например

  <div class="div wrapper main-wrapper"></div>
  <p class="wrapper"></p>

Но ID может и должен быть единственный и только у одно элемента...

И еще. Судя по этому блоку правил

   #div {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16px;
        width: 67px;
        margin-top: 10px;
  }

вот эти правила

  display: flex;
  align-items: center;
  justify-content: center;

для родительского элемента. В этом блоке есть что-то?

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.