html5中div怎么横着写,html5:div 横向排列的方法

div 横向排列的方法。

以下面这组 div 为例，wrap 的高度由内容撑开

div1

div2

div3

平时是这样的，上下排列~

float 浮动

#div1{

float: left;

}

#div2 {

float: right;

}

#div3 {

float: right;

}

然后这样了

成功横向排列了，但是有几个问题~

float 的特点：

多个 div 右浮动时，顺序会颠倒，请注意看 div2 和 div3，可以通过将它们再用一个 div 包起来，然后对它们设置左浮动，对父 div 设置右浮动来解决。

脱离文档流，若父元素高度由内容撑开，那么就撑不开，从图中可以看到 wrap 没了，因为高度变为了 0，可通过清浮动来解决。

文字会环绕在浮动元素周围，图中未表现出来。

不能换行，图中未表现出来。

inline-block 行块标签

#div1, #div2, #div3{

display: inline-block;

}

横排成功~但同样有些问题：

inline-block 特点：

元素间会有空白。这个空白其实是空白符，因为 inline-block 会使元素在行内排列，也就是跟文字在一起排列，而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符，所以就会出现缝隙，常见的解决方案有：

通过给父元素设置 font-size: 0; ，使空白符不可见。但会导致子元素中继承的字体大小也为 0，解决方案：

可以明确子元素内字体大小的，为其单独设置文字大小。

可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。

在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差，丑拒。

div1

div2

div3

不用 inline-block，嘿嘿~

可以换行，如下图

flex 弹性盒模型

最爱的解决方案，给父元素设置 display: flex; 即可。

#wrap{

display: flex;

}

效果图：

还可以通过 justify-content 属性调整子元素的水平对齐方式：

#wrap{

display: flex;

justify-content: flex-start;

}

flex-start：

默认，图同上。

flex-end：

center：

space-around：

space-between：

不过当父元素宽度不够时， flex 默认是不会换行的，而是会等比例压缩，缩放比例 flex-shrink 属性或复合属性 flex 相关。

通过 flex-wrap 属性可以使其换行，该值有三个取值 nowrap、 wrap、 wrap-reverse，默认为 nowrap。

#wrap{

display: flex;

flex-wrap: nowrap;

}

nowrap

默认，图略。

wrap

wrap-reverse

flex 使用不再深入探讨，推荐阮一峰写的教程 Flex 布局教程：语法篇

html5中div怎么横着写,html5:div 横向排列的方法相关推荐

在html5中空标签可以不写,HTML5中标签之间尽量不要加enter或者空格
HTM友,记基开前不接些前家我告对猿果水使钮控L5中如果标签之间随意使用换行或者空格可能会出现意向不朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随到的bug. 具体实例: 写 ...
html5中音乐播放器怎么写,html5简单音乐播放器
自己写的一个简单的音乐播放器, 主要实现了控制播放暂停,时间显示,音乐进度条点击以及拖动改变播放进度效果. 基于jquery编写,需要引入jquery. HTML: 00:00:00 00:00:00 ...
html5:div 横向排列的方法。
div 横向排列的方法. 以下面这组 div 为例,wrap 的高度由内容撑开 <div id="wrap"><div id="div1"&g ...
html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...
html中的鼠标事件怎么写,html5中的鼠标事件以及鼠标事件属性
鼠标事件先列出html5中鼠标常见的一系列事件: 事件名称描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 ondrag 当拖动元素时运行脚本 ondrage ...
HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解
html5中可拖动dragable属性及其他成员的讲解发布时间:2020-04-22 11:08:02 来源:亿速云阅读:350 作者:小新这篇文章主要为大家详细介绍了html5中可拖动drag ...
html5中ol的意思,详解HTML5中ol标签的用法
定义和用法标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中,不赞成使用 "start" 属性,在 HTML 5 中是允许的. 在 ...
html5中怎么设置音频的位置,HTML5中音频的详细解析
摘要腾兴网为您分享:HTML5中音频的详细解析,智慧医疗,榛果民宿,猿辅导,优酷等软件知识,以及虚拟视频,天正建筑tarch8.5,跟谁学登录,照片回收站,医学生简历模板,重复文件删除,卡农社区,招 ...
html5中的css特性,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...

html5中div怎么横着写,html5:div 横向排列的方法

html5中div怎么横着写,html5:div 横向排列的方法相关推荐

最新文章

热门文章