Html 如何通过响应性控制div

我有一个364px宽的div。容器中可以有一个或多个相同的div。我希望divs width的行为如下所示

我想在一行中显示最多4个div，我现在正在这样做。我想要的是，如果有一个div，它的宽度应该是100%。如果是两个div，则应为50%。如果有三个分区，则每个分区的宽度应为33.3%。如果有四个分区，则每个分区的宽度应为25%

我该怎么做

容器可能看起来像这样

<div class="container">
    <div class="goal"></div>
</div>

}

Flexbox

您的div的宽度必须相等，因此您的规则是：

flex:1 0

其中规定：

flex-grow: 1; /* grow to fill the available space */
flex-shrink: 0; /* can't shrink, but because the default width is 0, it doesn't need to */
flex-basis: 0; /* default width */

并在

.container

上设置

display:flex

.goal{
背景：#5A8EAE；
宽度：364px；
高度：自动；
颜色：#F4F7F9；
浮动：左；
右边距：20px；
边缘底部：20px；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
弹性：100；
-ms-flex:100；
-webkit-flex:100；
}
.集装箱{
显示器：flex；
显示：-ms flex；
显示：-webkit flex；
}

1.
2.
3.
1.
2.
1.

Flexbox

您的div的宽度必须相等，因此您的规则是：

flex:1 0

其中规定：

flex-grow: 1; /* grow to fill the available space */
flex-shrink: 0; /* can't shrink, but because the default width is 0, it doesn't need to */
flex-basis: 0; /* default width */

并在

.container

上设置

display:flex

.goal{
背景：#5A8EAE；
宽度：364px；
高度：自动；
颜色：#F4F7F9；
浮动：左；
右边距：20px；
边缘底部：20px；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
弹性：100；
-ms-flex:100；
-webkit-flex:100；
}
.集装箱{
显示器：flex；
显示：-ms flex；
显示：-webkit flex；
}

1.
2.
3.
1.
2.
1.

如果您愿意使用jquery，可以使用jquery解决方案

$（文档）.ready（函数（）{
$（'.add'）。在（'click'，function（）上{
如果（$（'.goal'）。长度<4）{
$（'.container'）.append（'stuff here'）；
响应性（）；
}
});
响应性（）；
功能响应（）{
变量计数=$（'.goal'）.length；
变量宽度=parseFloat（100.00/计数）.toFixed（0）-1；
$（'.goal'）。每个（函数（）{
$（this.css（'width'，width+'%'）；
});
};
});
.container{
宽度：364px；
背景：浅灰色；
轮廓：1px纯蓝色；
填充：15px；
}
.目标{
外形：1px纯黑；
高度：50px；
背景：灰色；
显示：内联块；
}

这里的东西
如果您愿意使用jquery，可以使用jquery解决方案


$（文档）.ready（函数（）{
$（'.add'）。在（'click'，function（）上{
如果（$（'.goal'）。长度<4）{
$（'.container'）.append（'stuff here'）；
响应性（）；
}
});
响应性（）；
功能响应（）{
变量计数=$（'.goal'）.length；
变量宽度=parseFloat（100.00/计数）.toFixed（0）-1；
$（'.goal'）。每个（函数（）{
$（this.css（'width'，width+'%'）；
});
};
});
.container{
宽度：364px；
背景：浅灰色；
轮廓：1px纯蓝色；
填充：15px；
}
.目标{
外形：1px纯黑；
高度：50px；
背景：灰色；
显示：内联块；
}

这里的东西
使用
显示：表格
和
显示：表格单元格

Html:

这也可以在不使用flexbox的情况下使用
display:table
和
display:table cell

Html:

您能解释一下这个弹性值吗？1 0 0？这意味着
.goal
应该从
0
宽度（第三个0）开始，并根据需要增长（第一个1），全部在同一行上，没有包装，使它们的宽度相等。这是我找到的最好的指南，我经常参考它：@Shaonline请记住IE 10或以下版本在
display:flex
@AGE方面有问题-它支持旧的语法，但完全支持flexbox。@Adam同意，继续将语法添加到您的答案中。。。或者一个参考链接你能解释一下这个弹性值吗？1 0 0？这意味着
.goal
应该从
0
宽度（第三个0）开始，并根据需要增长（第一个1），全部在同一行上，没有包装，使它们的宽度相等。这是我找到的最好的指南，我经常参考它：@Shaonline请记住IE 10或以下版本在
display:flex
@AGE方面有问题-它支持旧的语法，但完全支持flexbox。@Adam同意，继续将语法添加到您的答案中。。。或一个参考链接
flex-grow: 1; /* grow to fill the available space */
flex-shrink: 0; /* can't shrink, but because the default width is 0, it doesn't need to */
flex-basis: 0; /* default width */

<div class="wrapper">
  <div class="container">
    <div class="goal">1</div>
  </div>
  <div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
    <div class="goal">3</div>
  </div>
  <div class="container">
    <div class="goal">1</div>
    <div class="goal">2</div>
    <div class="goal">3</div>
    <div class="goal">4</div>
  </div>
</div>

.wrapper {
  width: 350px;
}
.container {
  display: table;
  width: 100%;
  text-align: center;
}
.goal {
  padding: 1em;
  border: 1px solid black;
  display: table-cell;
  background: #5A8EAE;  
  color: white;
  font-family: sans-serif;
}