css 两个div放一行

在网页中，经常需要将两个或多个div元素并排放置，以实现布局上的需要。而CSS中也提供了多种方法来实现这个效果，常见的有以下两种方法。

.container {
        display: flex;
}
.box {
        flex: 1;
}

第一种方法是使用CSS3的flex布局。在容器元素上添加display: flex样式，子元素会成为弹性盒子，即flexbox。通过在每个子元素上添加flex: 1样式，可以平分容器的宽度，从而实现两个子元素并排放置。同时，也可以通过调整每个子元素的flex值，来实现不同宽度比例的分配。

.container {
        width: 100%;
}
.box {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
}
    

第二种方法是使用传统的inline-block布局。在容器元素上设定宽度为100%，保证容器元素占据整个可视区域。而每个子元素则通过display: inline-block样式将它们变为行内块级元素。然后，再将每个子元素的宽度设定为50%，同时将box-sizing属性设定为border-box，保证元素宽度包含了边框和内边距。

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