• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

CSS3 web前端中文站 2年前 (2017-10-23) 928次浏览 已收录 0个评论

很多时候,我们希望列表的最后一行是左对齐排列的,而不是两端对齐,这时候怎么办呢?原理与上面的两端对齐一致。就是复制几个列表元素的外层标签,等宽,但高度为 0,里面就是个(不可缺),复制的个数一般就是每行元素的列表个数啦,这样肯定可以保证最后一行元素一定是左对齐排列的啦!

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

如下 HTML 代码:

 <div class="box">     
 <span class="list"><img src="lisa33xiaoq.net.jpg" /> 哇哦,美女,口水,鼻血~~~
 </span>     
 <span class="list">
 <img src="lisa33xiaoq.net.jpg" /> 哇哦,美女,口水,鼻血,不行了,我的小兔乱撞~~
 </span>  
 <span class="list">
 <img src="lisa33xiaoq.net.jpg" /> 哇哦,美女,口水,鼻血,不行了,我的小兔乱撞~~
 </span>  
 <!-- web 前端中文站:www.lisa33xiaoq.net --> 
 </div>

CSS 代码:

 .box{width:50%; 
 padding:20px; 
 margin:20px auto; 
 background-color:#f0f3f9; 
 text-align:justify;} 
 .list{width:120px; 
 display:inline-block; 
 padding-bottom:20px; 
 text-align:center; 
 vertical-align:top;}

运行效果:

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

以上就是 text-align:justify 下列表的两端对齐布局的实例,欢迎吐槽!

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:text-jusyify 下的 inline-block 自适应列表布局实例
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址