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



目录
相关文章
|
缓存 iOS开发
IOS网络编程:使用 URLSession 实现网络请求的步骤是什么?
IOS网络编程:使用 URLSession 实现网络请求的步骤是什么?
217 1
|
存储 SQL 大数据
列式存储系列(一)C-Store
列式存储系列(一)概述 序 本文是列式存储系列的第一篇。在这个系列中,我们将介绍几个典型的列式存储系统。这些列式系统的出现都有各自的时代背景。在介绍这些系统的同时,我们也尽量介绍一下它们的背景,以便大家有一个更宏观的认识,理解这个系统为什么会出现,它要解决的问题,以及它如何影响后来类似系统的发展。
3137 0
|
安全 网络协议 物联网
AliOS Things开发前准备 |《AliOS Things快速开发指南》
在运行AliOS Things系统之前,您需要做好一系列准备工作,包括搭建环境、安装驱动设备、下载AliOS Things系统源码、安装开发工具AliOS Studio等。本文详细介绍如何完成这些准备工作。
AliOS Things开发前准备 |《AliOS Things快速开发指南》
|
Java Apache
Apache PDFbox快速开发指南
一、介绍 Apache PDFbox是一个开源的、基于Java的、支持PDF文档生成的工具库,它可以用于创建新的PDF文档,修改现有的PDF文档,还可以从PDF文档中提取所需的内容。
2297 0
|
机器学习/深度学习 PyTorch 算法框架/工具
【python-Unet】计算机视觉~舌象舌头图片分割~机器学习(三)
【python-Unet】计算机视觉~舌象舌头图片分割~机器学习(三)
993 0
|
7月前
|
机器学习/深度学习 运维 算法
大数据基础工程技术团队4篇论文入选ICLR,ICDE,WWW
大数据基础工程技术团队4篇论文入选ICLR,ICDE,WWW
|
10月前
|
存储 安全 算法
AES算法
【10月更文挑战第30天】AES算法
1110 2
|
11月前
|
移动开发 数据可视化 小程序
可视化集成相当优秀ucharts图表组件
可视化集成相当优秀ucharts图表组件
138 4
解决Spring Boot项目中的数据库迁移问题
解决Spring Boot项目中的数据库迁移问题
|
机器学习/深度学习 数据采集 算法
【Python机器学习】PCA降维算法讲解及二维、高维数据可视化降维实战(附源码 超详细)
【Python机器学习】PCA降维算法讲解及二维、高维数据可视化降维实战(附源码 超详细)
576 1