css使多个div高度自适应

CSS是网页设计中最重要的语言之一，可以使网页看起来更加美观和专业。但是对于那些不太了解CSS的人来说，有些常见的问题可能会使他们感到困惑。比如：如何使多个div高度自适应？这个问题有多种解决方案，下面我们来看看其中一种方法。

/* HTML代码 */div class="wrapper">
      div class="box">
        p>
    第一个div的内容/p>
      /div>
      div class="box">
        p>
    第二个div的内容/p>
      /div>
      div class="box">
        p>
    第三个div的内容/p>
      /div>
    /div>
/* CSS代码 */.wrapper {
      display: flex;
      flex-wrap: wrap;
}
.box {
      width: calc(100% / 3);
     /* 三等分宽度 */  padding: 10px;
      box-sizing: border-box;
      background-color: #ddd;
}
     

解释一下上面的代码：我们首先定义了一个“wrapper”容器，用flex布局，设置为自动换行。这样，容器中的div在宽度不够的情况下就会自动下一行。

而每个“box” div的宽度设为总宽度的三分之一，这样就能平分每一行的宽度，并且设置了内边距和盒子模型为“border-box”，避免了边框和内边距导致宽度超出的问题。

同时，“box” div也设置了一个背景色，以便更好地观察其高度的自适应情况。

这样，无论有多少个“box” div，都可以平分每一行的宽度，并自适应高度。如果您想要每行不同列数，可以根据实际情况修改宽度比例即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！