Создать новый div с другой шириной% - PullRequest
Новая
       11

Создать новый div с другой шириной%

0 голосов
/ 09 апреля 2019

Я создал раздел с одним div. Кнопка «нажмите» добавляет новый div каждый раз, когда я нажимаю. Что мне нужно: div 1 -> 100% ширина (сечение) когда я нажимаю: div 1 и div2 (div 2 new) -> получают ширину 50% каждая. нажмите еще раз: div1, div2 и div3 -> ширина 30% каждая. нажмите еще раз: div 4 переходит к следующей строке с такой же шириной

Есть идеи? https://jsfiddle.net/Vova_Champion/tcyw64wq/6/

document.getElementById("button").onclick = function() {
  let ok = true;
  if (ok === true) {
    let div = document.createElement('div');
    div.className = 'new-div';

    document.getElementsByTagName('section')[0].appendChild(div);
  }
};
section {
  display: flex;
  height: 100px;
  width: 200px;
  background: red;
  flex-wrap: wrap;
  overflow: auto;
}

div {
  display: block;
  height: 30px;
  width: 100%;
  max-width: 30%;
  background: blue;
  margin: 5px 2px;
}

#button {
  color: red
}
<button id="button">Click button</button>
<section id="section">
  <div></div>
</section>

Ответы [ 3 ]

2 голосов
/ 09 апреля 2019

Используйте этот стиль div: 

div {
  flex-grow: 1;
  display:block;
  height: 30px;
  min-width: 30%;
  background: blue;
  margin: 5px 2px;
}

«Flex-grow» дает им «вес» внутри div, элементы с одинаковым изгибом имеют одинаковую часть доступного пространства. Минимальная ширина приводит к уменьшению 4-го деления, поскольку при добавлении к той же строке их ширина будет равна 25%.

Если вам нужны дальнейшие объяснения, пожалуйста, спросите!

1 голос
/ 09 апреля 2019

Я бы также предложил несколько flex-grow и условный класс для фиксирования ширины после 3 элементов.Вот моя попытка;)

Я также использовал css calc. 

(function() {
  const section = document.getElementById('section');

  function addDiv() {
    const div = document.createElement('div');
    div.className = 'new-div';
    section.appendChild(div);

    if (section.childNodes.length > 3) {
      section.classList.add("fixedWith");
    }
  }

  document.getElementById("button").onclick = function() {
    addDiv();
  };

  document.addEventListener("DOMContentLoaded", function() {
    addDiv();
  });
})();
section {
  display: flex;
  height: 100px;
  width: 200px;
  background: red;
  flex-wrap: wrap;
  overflow: auto;
}

div {
  flex-grow: 1;
  min-width: calc(100% / 3 - 4px);
  height: 30px;
  background: blue;
  margin: 5px 2px;
}

section.fixedWith div {
  max-width: calc(100% / 3 - 4px);
}

#button {
  color: red;
}
<html>

<body>
  <button id="button">Click button</button>
  <section id="section"></section>
</body>
<html>
0 голосов
/ 09 апреля 2019

Помещение flex: 1 в div говорит, что это займет 1 долю пространства в его родительском элементе.Когда добавляется еще один div, он занимает 1 из двух доступных долей пространства и так далее.Flex-основа: 30%;фактически говорит о том, что каждый элемент flex может занимать не более 30% доступного пространства для этой строки.Надеюсь, это решит вашу проблему! 

section {
  display: flex;
  height: 100px;
  width: 200px;
  background: red;
  flex-wrap: wrap;
  overflow: auto;
}

div {
  display: block;
  height: 10px;
  flex: 1;
  flex-basis: 30%;
  background: blue;
  margin: 5px 2px;
}

#button {
  color: red;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...