css中div按比例分配代码

元素。

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex-basis: 33.333333%;
  background-color: #ddd;
  height: 200px;
  border: 1px solid #999;
}
</style>
<br>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div> 

在上面的代码中，我们使用了基于CSS的flexbox布局模型，容器元素和子元素中的各种设置允许我们基于比例分配宽度值。
为了最好地了解这种方法，以下是上述代码段中的CSS代码的分解部分：
- display: flex;将容器元素更改为flexbox布局。 - flex-wrap: wrap;允许元素在一行过多时自动换行，可以更好地适应不同的浏览器和设备尺寸。 - flex-basis: 33.333333%;把每个小框元素的初始值设置为33.333333%宽度，让它们三个按照比例分配。 - background-color: #ddd;设置背景色来区别DIV元素。 - height: 200px;设置每个DIV元素的高度。 - border: 1px solid #999; DIV元素包括边框和阴影。
最后，在我们的HTML代码中，我们向容器元素添加三个