div左右对齐,css中两个div水平对齐

　　本文主要介绍了差异水平布局两边对齐的三种实现方法，分享给大家，具体如下：

方法一

　　 父容器差异使用位置：相对；子差异使用位置：绝对；定位，注意边距问题

　　超文本标记语言

　　div class=" div-container " div class= div 1 1/div div class= div 2 2/div/div CSS

　　/* 方法一*/.div-container { margin:10px 0；填充：10px宽度：400像素边框：2px纯色# ccc位置：相对；} .div 1 {宽度：100p x；高度：50px边框：2px纯红；}.div2 {宽度：100像素高度：50px边框：2px纯红；位置：绝对；/* 边距设置*/右：10 pxtop:10px；}

方法二 推荐

　　 父容器差异使用显示器：flex justify-content:space-between；即可

　　超文本标记语言

　　div class= div-container 2 div class= div 3 3/div div class= div 4 4/div/div CSS

　　/* 方法二*/.div-container 2 { margin:10px 0；填充：10px宽度：400像素边框：2px纯色# ccc显示器：flex justify-content:space-between；}.div3 {宽度：100像素高度：50px边框：2px纯红；}.div4 {宽度：100像素高度：50px边框：2px纯红；}

方法三

　　 父容器差异使用显示器：flex实现水平排列，子差异设置宽度进行填充占位

　　超文本标记语言

　　div class= div-container 3 div class= div 5 5/div div class= div 7 占位div/div class= div 6 6/div/div CSS

　　/* 方法三*/.div-container 3 { margin:10px 0；填充：10px宽度：400像素边框：2px纯色# ccc显示器：flex justify-content:space-between；} .div 5 {宽度：100px高度：50px边框：2px纯红；} .div 6 {宽度：100px高度：50px边框：2px纯红；} .div 7 { width:calc(100%-100px-100px)；高度：50px边框：1px纯色# ccc}GitHub完整代码链接

　　https://github。com/gywgithub/演习01/blob/master/div-flex/index。超文本标记语言

　　到此这篇关于差异水平布局两边对齐的三种实现方法的文章就介绍到这了，更多相关差异水平布局两边对齐内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。