网页编程网
www.youkud.com
掌握计算机、网络技术，让生活更美好！
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置：
主页
>>
DIV+CSS
>> 正文
div实现元素横排的方法，如何让元素横排显示
阅读：2847 输入：2022-07-22 15:27:28
<head> <meta charset="utf-8"> <style> .box{ border:3px solid blue; } .a{ width:200px; height:200px; background:blue; } .a:nth-child(2){ background:red; } .clear{ clear:both; } </style> </head> <body> <div class="box"> <div class="a"></div> <div class="a"></div> <div class="class"></div> <p>你是一狗只</p> </div> <hr /> <h3>默认的是上下排列，如何修改成横排呢？</h3> 方1.给a加浮动，float:left，缺点是box成了一条线高度不见了，即父元素高度坍塌。需要加height:250px<br /> 缺点二，box下的其他p，会接着出现在下面。需要在p上与div下，再加个盒子来清除浮动，给父元素加over-flow:hidden<br /> 法2.div的本质是块元素，需独点一行，所以二者显示成二行，所以要横行显示，只要取消其块元素，使其变成行内元素display:inline-block<br /> 缺点是：空白符会造成有空隙。解决方案1：diva与divb模着写，就是连在一起。解决方案2：设置父元素加字体大小为0；解决方案2：divb的margin-left:负值<br /> 法3.弹性布局，没有高度坍塌，也没有空隙，缺点浏览器兼容。（推荐方法）<br /> 父元素display:flex<br /> 解决浏览器兼容性，加前缀。<br /> <style> .out{ display:flex; display:-webkit-flex; display:-moz-flex; border:3px solid blue; } </style> <div class="out"> <div class="a"></div> <div class="a"></div> <p>你是一只狗</p> </div> </body>
上一篇：
go语言快速入门
下一篇：
php字符串转十六进制，实现简单干扰
相关阅读
css3实验登录页面
页面在移动端出现右边空白，为何不能全撑满
css3实现列表自适应，多行多列响应式
下载专区
软件下载（提取码：mtag）
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换（带小数）
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens