css两个div并列显示

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS是前端开发中最常用的技术之一,其中,使用两个div并列显示是非常常见的布局方式。那么,如何用CSS实现两个并列显示的div呢?/*CSS代码*/ .container{ display: fle

CSS是前端开发中最常用的技术之一,其中,使用两个div并列显示是非常常见的布局方式。那么,如何用CSS实现两个并列显示的div呢?

/*CSS代码*/
.container{
    display: flex; /*设置为弹性盒子布局*/
    justify-content: space-between; /*平均分配空间,使两个div并列显示*/
}
.left{
    width: 50%; /*设置左边div的宽度为50%*/
}
.right{
    width: 50%; /*设置右边div的宽度为50%*/
} 

上面的代码中,我们首先将.container设置为弹性盒子布局,然后使用justify-content属性将两个div的间距平均分配,从而实现两个div并列显示的目的。

同时,我们还设置了左边div和右边div的宽度都为50%,这样就能够保证两个div的宽度是相等的。

总之,只要使用上述的CSS代码,就能够轻松实现两个div并列显示的效果了。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个div并列显示

粉丝

0

关注

0

收藏

0

已有0次打赏