网站H5前端开发之display水平排列

Display 的几个常用的属性，如下图：
第一个是block，是使元素变成块级元素，元素会独占一行，块级元素宽度默认100%，可以设置宽度width、高度height、填充padding、间距margin的值。
第二个是inline，是使元素变成行内元素，可以与其他行内元素共占同一行，不会独占一行，
不能设置宽度width、高度height，可以设置填充padding、间距margin左右的值。
第三个是inline-block，是使元素变成行内块级元素，可以与其他行内元素共占同一行，元素不会独占一行的，可以设置宽度width、高度height、填充padding、间距margin的值。
第四个是none，元素会隐藏，元素所占的空间也不会保留。

Display: inline-block 可以搭配vertical-align一起使用，vertical-align的属性有sub 、super、text-top、text-bottom、middle，对应的属性的解释如下图：
在工作中遇到的项目，有的例如企业网站的新闻或者产品模块，如下图的效果，当上新闻图片或者产品图片的尺寸不同的时候，用浮动布局去做的话，可能排版会产生错乱，那么可以用Display:inline-block;

效果如下图：

文章名称：网站H5前端开发之display水平排列
文章分享：/news40/242740.html

成都网站建设公司_创新互联，为您提供动态网站、品牌网站建设、建站公司、网站营销、搜索引擎优化、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联