div水平布局两边对齐

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

2be842c6359c31d0f075dc39f82e40d6.png

方法一


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


html

<div class="div-container">  
<div class="div1">1</div>  
<div class="div2">2</div>
</div>


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

<div class="div-container2">  
<div class="div3">3</div>  
<div class="div4">4</div>
</div>


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


<div class="div-container3">  
<div class="div5">5</div>  
<div class="div7">占位div</div>  
<div class="div6">6</div>
</div>


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



目录
相关文章
|
1月前
|
UED
使用约束布局实现居中对齐效果
【10月更文挑战第24天】我们可以看到使用约束布局实现居中对齐并不是一件难事。只要掌握了基本的方法和技巧,结合具体的场景进行灵活运用,就能轻松地实现各种居中对齐效果。在实际开发中,要不断实践和总结经验,以便更好地发挥约束布局的优势,为用户带来更优质的界面体验。
47 1
|
6月前
|
前端开发
css元素实现垂直竖直万能居中
css元素实现垂直竖直万能居中
40 0
|
1月前
在使用 Flexbox 布局实现自适应宽度的品字布局时,子元素的排列顺序是否可以调整?
【10月更文挑战第27天】使用Flexbox布局实现自适应宽度的品字布局时,可以通过调整HTML结构中的顺序或使用 `order` 属性来灵活地调整子元素的排列顺序,以满足不同的设计和布局需求。
|
6月前
|
前端开发 UED
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
深入理解CSS中的文本对齐方式:水平对齐与垂直对齐
169 5
|
7月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
66 1
|
7月前
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
56 1
盒子居中效果案例(使用位移方法)
盒子居中效果案例(使用位移方法)
101 0
盒子居中效果案例(使用位移方法)
|
前端开发
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
网页是一个多层的结构,设置样式样式,也是一层一层的设置,最终我们看到的最上面的一层。
133 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(1)
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)
内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距,盒子的大小由内容区、内边距和边框共同决定。外边距指的是当前盒子与其他盒子之间的距离,他不会影响可见框的大小,而是会影响到盒子的位置。
217 0
认识盒子模型,盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法(2)