自动将内容调整为div

Question

我有一个<div class="row">，其中包含动态生成的按钮（基本上我需要方框）

我需要父div具有固定大小，但需要根据插入的按钮数量自动调整大小（以适应一行中的所有内容）。

考虑以下布局：

我尝试过的所有解决方案都需要固定宽度，或者框用新行标出。

我的最后一个选项是使用ng-style并将宽度设置为100 /盒数。我需要一些其他解决方案。

到目前为止我尝试过的其中一件事：

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}

<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Answer 1

使用flexbox

＆＃13;

＆＃13;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Test {

    public static void main(String[] args) {

        System.setProperty("webdriver.gecko.driver","C:/Selenium/geckodriver.exe");

        WebDriver driver=new FirefoxDriver();

        driver.get("http://www.google.co.in");

＆＃13;

div {
  display: flex;
}

button {
  flex: 1 1;
}

＆＃13;

＆＃13;

＆＃13;

实施例。用你的代码。

＆＃13;

＆＃13;

<div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

＆＃13;

.wrap {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.wrap div {
  flex: 1 1;
  padding-bottom: 23%;
  background: gold;
  border: 1px solid;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

只是使用flexbox不会削减它。如果您需要在添加更多框时保持方形的框，您还需要使用一些javascript。

我们在做什么？

• 我们通过维护一个迭代变量（i）来添加更多的盒子并改变它们的高度，该变量检查存在多少个盒子并根据宽度划分高度。因为，如果存在3个盒子，宽度是固定的，高度应该等于每个项目的宽度。
• 您可以实现一个函数，该函数计算加载时的框数，并根据它调整弹性容器的高度，使框保持方形尺寸。
  ＆＃13;

  ＆＃13;

  var flex = document.getElementById("container");
  var box = document.getElementById("box1");
  var i=1;
  function add() {
    i++;
    var cln = box.cloneNode(true);
    cln.removeAttribute("id");
    flex.appendChild(cln);
    flex.style.height=(flex.clientWidth/i) + 'px';
  
  }

  ＆＃13;

  .flexc {
    display: flex;
    width: 400px;
    height:400px;
  }
  
  .box {
    flex: 1;
    border-radius: 20px;
    background: olive;
    margin:1px;
  }

  ＆＃13;

  <button id="add" onclick="add()">Add more boxes</button>
  <div class="flexc" id="container">
    <div class="box" id="box1"></div>
  </div>

  ＆＃13;

  ＆＃13;
  ＆＃13;