css并列的两个盒子一样高

CSS中经常会遇到这样的需求，就是要求两个或多个并列的盒子的高度保持一致，这样才会更美观。

不过，我们都知道，HTML和CSS中的盒子高度并不容易控制，特别是在盒子内容较多时更难以实现。但是，使用CSS技巧，我们可以很容易做到让两个并列的盒子高度一样。

/*HTML代码*/div class="container">
       div class="box1">
          p>
    这是盒子1的内容，较多较多的内容，还有更多内容。/p>
       /div>
       div class="box2">
          p>
    这是盒子2的内容，较少较少的内容。/p>
       /div>
    /div>
/*CSS代码*/.container {
       display: flex;
}
.box1, .box2 {
       flex: 1;
}
.box1 {
       background-color: red;
       padding: 10px;
       margin-right: 10px;
}
.box2 {
       background-color: blue;
       padding: 10px;
}
    

上面的代码中，我们首先将两个盒子放进父级容器中，然后通过CSS的flex属性设置两个盒子的宽度自适应屏幕大小。然后，我们给第一个盒子添加一个右边距以便与第二个盒子有一定的间距。

通过以上设置，两个盒子的高度实现了完美的平齐。如果您需要更多并列盒子高度保持一致的示例，请参考CSS flex布局。

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