javascript - 自动调整内容到 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

div {
  display: flex;
}

button {
  flex: 1 1;
}

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

例。用你的代码。

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

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

<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>