css 左右高度不一

在网页设计中，我们常常遇到这样的问题：左右两个容器高度不一致，影响整个页面的美观与效果。这时候就需要使用CSS来解决这个问题了。

.left {
    float: left;
    width: 50%;
    background-color: pink;
    height: 400px;
}
.right {
    float: right;
    width: 50%;
    background-color: skyblue;
    height: 300px;
}
    

如上面的代码所示，我们在左容器中设置了高度为400px，在右容器中设置了高度为300px，这样就会出现左右高度不一的情况。我们可以通过以下两种方式解决这个问题：

1. 使用flex布局：使用display: flex; 配合align-items: stretch; 即可实现左右两个div高度相等。

.container {
    display: flex;
    align-items: stretch;
}
    

2. 使用伪元素：在左右两个容器中分别添加伪元素，在左容器中添加::after，并设置content: ""; height: 100%; display: inline-block; vertical-align: middle; ，在右容器中添加::before，并设置content: ""; height: 100%; display: inline-block; vertical-align: middle; 即可让左右两个容器高度相等。

.left::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.right::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
    

总之，通过以上两种方式，我们都可以成功实现左右两个容器高度相等，提升整个网页的效果及美观度。

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