主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
div实现元素横排的方法，如何让元素横排显示
2022-07-22
网页编程网
网页编程网
<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>
阅读原文
阅读
2304
123
显示电脑版