计算div的宽度使其相等

Question

我有一个form和低于它的div数：

是否可以自动计算div的宽度，以便连续的最后一行与提交按钮并行运行？这就是我的意思：

正如您从垂直红线所见，div（又名黑色矩形）正好在提交按钮结束的位置结束。

这里是一个JsFiddle：https://jsfiddle.net/hphmmvuo/

HTML

<div class="container">
  <form method="post" style="margin-left: 0.7%; margin-bottom: 10px;">
    <input class="comment" type="text">
    <input class="commentsubmit" type="submit">
  </form>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
</div>

CSS

.container {
  margin-left: 5%;
  margin-right: 5%;
}

.comment {
  width: 80%;
  box-sizing: border-box;
  margin-right: 0.6%;
}

.commentsubmit {
  box-sizing: border-box;
  width: 14%;
}

.box {
  width: calc(90% / 5);
  display: inline-block;
  padding-bottom: 10px;
  margin: 0.7%;
  border: 1px solid;
}

Answer 1

使用flexbox，在第二行附近添加<div>：

https://jsfiddle.net/C14L/ga0766jx/2/

.container > div {
  display: flex;
  flex-flow: row nowrap;
  width: 95.9%;
}
.container > div > .box {
  flex: 1 0;
  padding-bottom: 10px;
  margin: 0.7%;
  border: 1px solid;
}

要让盒子在一定数量后换行，请给它们一个近似的宽度。在下面的示例中，在4框之后，如果要在七个框之后换行，只需将该数字更改为7。

https://jsfiddle.net/C14L/ga0766jx/3/

.container > div {
  ...
  flex-flow: row wrap;
}
.container > div > .box {
  ...
  min-width: calc(90% / 4);
  max-width: calc(100% / 4);
}

Answer 2

来自我的评论：https://jsfiddle.net/hphmmvuo/1/

使用flex确实更容易。

.container {
  margin-left: 5%;
  margin-right: 5%;
  display:flex;
  /* allow wrapping */
  flex-wrap:wrap;
  /* spray element from a border to another */
  justify-content:space-between;
}    .container:after {
  flex:1;/* extra element will fill up the end of the line*/ 
  content:'';
}
form {
  width:100%;
  display:flex;
}
.comment {
  flex:1;
  box-sizing: border-box;
  margin-right: 0.6%;
  margin-left:0.7vw;
}

.commentsubmit {
  box-sizing: border-box;
  width: 14%;
}

.box {
  width: calc(90% / 5);
  padding-bottom: 10px;
  margin: 0.7vw 0 0.7vw 1.4vw ;
  border: 1px solid;
}

<div class="container">
  <form method="post" style="margin-left: 0.7%; margin-bottom: 10px;">
    <input class="comment" type="text">
    <input class="commentsubmit" type="submit">
  </form>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
  <div class="box inventory">
  </div>
</div>

Answer 3

将元素包装到具有相同宽度的容器中。即文本框和提交按钮到一个div，所有其他div到另一个div。