div 水平排列
来源:互联网 发布:蚁群算法解决指派问题 编辑:程序博客网 时间:2024/05/21 15:41
以下面这组 div 为例,wrap 的高度由内容撑开
- 1
- 2
- 3
- 4
- 5
平时是这样的,上下排列~
float 浮动
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
然后这样了
成功横向排列了,但是有几个问题~
float 的特点:
多个 div 右浮动时,顺序会颠倒,请注意看 div2 和 div3,可以通过将它们再用一个 div 包起来,然后对它们设置左浮动,对父 div 设置右浮动来解决。
脱离文档流,若父元素高度由内容撑开,那么就撑不开,从图中可以看到 wrap 没了,因为高度变为了 0,可通过清浮动来解决。
文字会环绕在浮动元素周围,图中未表现出来。
- 不能换行,图中未表现出来。
inline-block 行块标签
- 1
- 2
- 3
横排成功~但同样有些问题:
inline-block 特点:
元素间会有空白。这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙,常见的解决方案有:
- 通过给父元素设置
font-size: 0;
,使空白符不可见。但会导致子元素中继承的字体大小也为 0,解决方案:- 可以明确子元素内字体大小的,为其单独设置文字大小。
- 可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。
在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。
- 1
- 2
- 3
- 4
- 5
- 不用 inline-block,嘿嘿~
- 通过给父元素设置
- 可以换行,如下图
flex 弹性盒模型
最爱的解决方案,给父元素设置 display: flex;
即可。
- 1
- 2
- 3
效果图:
还可以通过 justify-content
属性调整子元素的水平对齐方式:
- 1
- 2
- 3
- 4
flex-start:
默认,图同上。
flex-end:
center:
space-around:
space-between:
不过当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink
属性或复合属性 flex
相关。
通过 flex-wrap
属性可以使其换行,该值有三个取值 nowrap
、 wrap
、 wrap-reverse
,默认为 nowrap
。
- 1
- 2
- 3
- 4
nowrap
默认,图略。
wrap
wrap-reverse
flex 使用不再深入探讨,推荐阮一峰写的教程 Flex 布局教程:语法篇
原文地址:http://blog.csdn.net/zmhawk/article/details/73293366
原文地址:
- div 水平排列
- 多个div水平排列并出现横向滚动条
- css margin参考和两个div水平排列的解决方案
- bootstrap 水平排列表单
- div 水平居中
- div水平垂直居中
- DIV 水平垂直居中
- 浮动div水平居中
- div 水平布局
- div 水平剧中
- 水平放置div
- div 水平垂直居中
- DIV水平居中显示
- 设置DIV水平居然
- div水平垂直居中
- css div水平居中
- div 水平居中
- div水平居中
- winbuilder 制作winpe
- 12. 访问限制public/private/protected
- c语言写的售货机,源码虽少,作用很大
- PV UV VV IP 区别
- Hive的Metastore三种配置方式分析
- div 水平排列
- ionic 滚动条
- 继承、接口、虚方法、抽象类
- 重温Activity(一)
- WORD2013和WORD2016加载破解版mathtype6.9
- mysql 执行计划分析三看, explain,profiling,optimizer_trace
- 支付宝异步通知notify_url与return_url
- 透过新硬件环境下的存储技术,看未来数据库系统崛起(附PPT)
- Android 清空缓存