您现在的位置是：网站首页> 编程资料编程资料

div水平布局两边对齐的三种实现方法在ul中使li水平布局的两种方法

2023-10-17 403人已围观

简介 这篇文章主要介绍了div水平布局两边对齐的三种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

方法一

父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题

html

1
2

css

 /* 方法一 */ .div-container { margin: 10px 0; padding: 10px; width: 400px; border: 2px solid #ccc; position: relative; } .div1 { width: 100px; height: 50px; border: 2px solid red; } .div2 { width: 100px; height: 50px; border: 2px solid red; position: absolute; /* 边距设置 */ right: 10px; top: 10px; }

方法二 推荐

父容器div使用 display:flex; justify-content:space-between; 即可

html

3
4

css

 /* 方法二 */ .div-container2 { margin: 10px 0; padding: 10px; width: 400px; border: 2px solid #ccc; display: flex; justify-content: space-between; } .div3 { width: 100px; height: 50px; border: 2px solid red; } .div4 { width: 100px; height: 50px; border: 2px solid red; }

方法三

父容器div使用display: flex;实现水平排列, 子div设置宽度进行填充占位

html

5
占位div
6

css

 /* 方法三 */ .div-container3 { margin: 10px 0; padding: 10px; width: 400px; border: 2px solid #ccc; display: flex; justify-content: space-between; } .div5 { width: 100px; height: 50px; border: 2px solid red; } .div6 { width: 100px; height: 50px; border: 2px solid red; } .div7 { width: calc(100% - 100px - 100px); height: 50px; border: 1px solid #ccc; }

GitHub 完整代码链接

https://github.com/gywgithub/exercise01/blob/master/div-flex/index.html

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

上一篇：CSS3选择器新增问题的实现CSS 选择所有子元素添加样式的方法CSS选择器中的正则表达式使用CSS3 新增选择器的实例一文教你玩转CSS 组合选择器

下一篇：纯CSS3实现运行时钟的示例代码css3 利用transform打造走动的2D时钟css3一个简易的 LED 数字时钟实现方法利用CSS3 动画 绘画 圆形动态时钟CSS实现漂亮的时钟动画效果的实例代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网