基于inline-block进行自适应列表布局

Cheriselalala 发布于2019-08-30 14:03 / 3244人阅读

摘要：代码如下为省略的其他属性内容直接让块元素设置为内联对象呈递设置属性，然后触发块元素的如或属性等。

需求

无论是电商网站展示商品列表还是个人博客展示文章列表，或者是社交站点展示好友列表，往往会遇到自适应列表布局的需求，本文介绍一种使用inline-block布局的方法。

block,inline和inlinke-block细节对比

● display:block

  a. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  b. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  c. block元素可以设置margin和padding属性。

● display:inline

  a. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  b. inline元素设置width,height属性无效。
  c. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

● display:inline-block

  a. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

IE6/IE7下对display:inline-block的支持性不好

1、inline元素的display属性设置为inline-block时，所有的浏览器都支持；
2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；

  对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性）
 IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

IE6下块元素如何实现display:inline-block的效果？

有两种方法：
1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：

div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：

div { display:inline-block; _zoom:1;_display:inline;} /推荐/
div { display:inline-block; _zoom:1;display:inline;} /推荐:IE67*/

text-jusyify下的inline-block自适应列表布局实例页面




    
    
    text-jusyify下的inline-block自适应列表布局
    




    text-jusyify下的inline-block自适应列表布局实例页面

            
                
                    
这是一段文字描述
                    
这是一段文字描述，另外一些描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述
                    
这是一段文字描述

效果

私有云专线服务 html 自适应列表自适应文本自适应文字自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115740.html

CSS 常用的定位和布局方法汇总(已添加源码地址)

CSS-Layout 旨在打造详尽的前端布局代码学习库（自从用了框架开发，CSS生疏了不少，所以开这个库练练手）SF不能正确解析含有中文的网址，所以某些预览链接无法跳转，请访问我的博客阅读此文常见定位方法水平居中子元素为行内元素还是块状元素，宽度一定还是宽度未定，采取的布局方案不同。方案选择基本思路：子元素为行内元素：对父元素设置text-align:center; 定宽块状元素: 设...

loonggg 2019-08-29 12:15 评论0 收藏0
div+css图片列表布局（一）

摘要：接下来我会以行列的图片列表为列子介绍两种常用的切图方案布局布局首先来讲布局的方法布局非常简单，一般我会使用布局然后给每个元素定一个宽度并向左浮动。是不是很简单详细代码可以参考下一篇文章图片列表布局二关注作者吧前端切图的时候经常会遇到图片布局，初学者可能会比较生疏。接下来我会以3行3列的图片列表为列子介绍两种常用的切图方案： showImg(https://segmentfault.c...

Travis 2019-08-30 13:20 评论0 收藏0
div+css图片列表布局（一）

摘要：接下来我会以行列的图片列表为列子介绍两种常用的切图方案布局布局首先来讲布局的方法布局非常简单，一般我会使用布局然后给每个元素定一个宽度并向左浮动。是不是很简单详细代码可以参考下一篇文章图片列表布局二关注作者吧前端切图的时候经常会遇到图片布局，初学者可能会比较生疏。接下来我会以3行3列的图片列表为列子介绍两种常用的切图方案： showImg(https://segmentfault.c...

ThreeWords 2019-08-01 16:10 评论0 收藏0
PC端CSS布局汇总

摘要：因为端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对端的布局进行讲解，以下代码只写关键代码。为了提高网页性能，考虑到，表格元素尽量少用，有其他选择的情况尽量用其他布局。前言此文章是解剖CSS布局原理的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对P...

zhangxiangliang 2019-08-29 13:55 评论0 收藏0