请选择 进入手机版 | 继续访问电脑版

技术控

    今日:4| 主题:61818
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 两端对齐布局与text-align:justify

[复制链接]
房妹 发表于 2016-10-1 06:42:11
211 3
两端对齐布局与text-align:justify

   前几天在项目开发过程中需要实现一个列表两端对齐,想着在页面开发过程中也经常会有需要用到两端对齐布局的时候,就计划总结一下常见实现方式,与诸位交流。
    可以先看看实例效果:两端对齐实现
    点此查看完整代码 https://github.com/codingplayboy/web_demo/blob/master/css/justify-layout.html
   百分比实现

   首先最简单的是使用百分比实现,如下一个展示列表:
  
  1.     <div class="wrap">
  2.         <ul class="percent-list">
  3.             <li class="percent-item"><img /></li>
  4.             <li class="percent-item"><img /></li>
  5.             <li class="percent-item" style="margin-right: 0;"><img /></li>
  6.         </ul>
  7.     </div>
复制代码
  给该列表设置样式:
  
  1.     .percent-list {
  2.         width: 100%;
  3.         background: #f0f0f9;
  4.         list-style: none;
  5.         font-size: 0;
  6.     }
  7.     .percent-item {
  8.         display: inline-block;
  9.         width: 30%;
  10.         height: 60px;
  11.         margin-right: 5%;
  12.         border: 1px solid lightblue;
  13.         box-sizing: border-box; /* 削去border边框宽度的影响 */
  14.     }
复制代码
  效果如图:
   

两端对齐布局与text-align:justify

两端对齐布局与text-align:justify-1-技术控-background,项目开发,justify,display,border

   这样当然很简单,而且也不会存在什么兼容性问题,但是其他问题还有很多:
   
       
  • 定宽的列表,效果很难实现
       
  • 如果内部img元素宽度不是100%且需要实现两端对齐,效果很难实现
       
  • 如果列表项数量是动态的,效果不能实现
       
   flex实现

   第二种实现方式就比较先进了,除了需要学习flex相关知识,使用还是很简单的,实现两端对齐效果,关键点是在flex容器上使用justify-content属性,并将其值设为space-between;
   Flex container
   The parent element in which flex items are contained. A flex container is defined using the flex or inline-flex values of the display property.
   Flex容器,是flex项目的父元素,flex容器通过声明display属性为flex/inline-flex值产生。
   Flex item
   Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
   Flex项目,flex容器的每个直接子元素都是一个flex项目,当直接子元素是文本时,该文本被一个匿名flex项目包含。
   The flex-direction property establishes the main axis.
   The justify-content property defines how flex items are laid out along the main axis on the current line.
   justify-content属性定义flex项目在当前行主轴线方向上的排布,而主轴由flex-direction属性定义。
   这两个属性均在flex容器上定义。
    更多关于flex知识请参考: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ,后续会对flex进行详细阐述。
   如下一个列表结构
  
  1.     <div class="flex-wrap">
  2.         <h3>Flex两端对齐列表</h3>
  3.         <ul class="flex-list">
  4.             <li class="flex-item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>1</p></li>
  5.             <li class="flex-item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>2</p></li>
  6.             <li class="flex-item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>3</p></li>
  7.             <li class="flex-item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>4</p><p>5</p></li>
  8.         </ul>
  9.     </div>
复制代码
  我们首先在flex容器设置样式:
  
  1.     // 兼容将近所有智能手机
  2.     .flex-list {
  3.         display: -moz-box;
  4.         display: -webkit-box;
  5.         display: -webkit-flex;
  6.         display: -moz-flex;
  7.         display: -ms-flexbox;
  8.         display: -ms-flex;
  9.         display: flex;
  10.         -webkit-box-pack: justify;
  11.         -moz-box-pack: justify;
  12.         -ms-flex-pack: justify;
  13.         -webkit-justify-content: space-between;
  14.         -moz-justify-content: space-between;
  15.         -ms-justify-content: space-between;
  16.         justify-content: space-between;
  17.     }
复制代码
  在flex-item上设置display:inline-block;会使flex失效,于是最好声明:
  
  1.     .flex-item{
  2.         display:block
  3.     }
复制代码
  注:不可在flex项目上设置flex属性

   效果如图:
   

两端对齐布局与text-align:justify

两端对齐布局与text-align:justify-2-技术控-background,项目开发,justify,display,border

   text-align:justify实现

   另外一种要介绍的是使用text-align:justyle;实现方式。
   我们知道text-align:justify;效果是实现文字两端对齐,如。
  
  1.     <p>默认是文字居中,如何实现文字两端对齐效果,这是个问题?</p>
  2.     <p style="text-align: justify;">如何实现文字两端对齐效果,这是个问题?</p>
复制代码
  效果如图:
   

两端对齐布局与text-align:justify

两端对齐布局与text-align:justify-3-技术控-background,项目开发,justify,display,border

   那么我们可以利用该属性实现行内元素两端对齐嘛?答案是肯定的,但是我们得进行额外的处理。
   一个设置justify状态下的列表:
  
  1.     <div class="wrap">
  2.         <h3>justify下列表</h3>
  3.         <ul class="list">
  4.             <li class="item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>1</p></li>
  5.             <li class="item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>2</p></li>
  6.             <li class="item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>3</p></li>
  7.             <li class="item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>4</p><p>5</p></li>
  8.         </ul>
  9.     </div>
复制代码
  样式如下:
  
  1.     .list {
  2.         width: 100%;
  3.         /*height: 90px;*/
  4.         background: #f0f0f9;
  5.         font-size: 0;
  6.         text-align: justify;
  7.         text-justify:distribute-all-lines;/* ie6-8 */
  8.     }
  9.     .item {
  10.         width: 60px;
  11.         height: 90px;
  12.         display: inline-block;
  13.         *display: inline;/* ie */
  14.         *zoom: 1;
  15.         box-sizing: border-box;
  16.         -moz-box-sizing: border-box; /* Firefox */
  17.         -webkit-box-sizing: border-box; /* Safari */
  18.         border: 1px solid lightblue;
  19.     }
复制代码
  效果如图:
   

两端对齐布局与text-align:justify

两端对齐布局与text-align:justify-4-技术控-background,项目开发,justify,display,border

   可以看到并没有两端对齐效果,这是因为使用text-align:justify;实现两端对齐,需要特殊的处理,我们需要在列表项最后面加一个辅助元素,样式如下:
  
  1.    .justify-fix {
  2.        width: 100%;
  3.        height: 0;
  4.        display: inline-block;
  5.        *display: inline; /* ie */
  6.        *zoom: 1; /* ie */
  7.        visibility: hidden;
  8.    }
复制代码
  比如,我们列表末尾加一个辅助li元素:
  
  1.     <div class="wrap">
  2.         <h3>justify两端对齐列表-v1(vertical-align: baseline;默认值)</h3>
  3.         <ul class="list">
  4.             <li class="item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>1</p></li>
  5.             <li class="item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>2</p></li>
  6.             <li class="item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>3</p></li>
  7.             <li class="item"><img src="http://blog.codingplayboy.com/wp-content/uploads/2016/06/cropped-profile-180x180.jpg" /><p>4</p><p>4</p></li>
  8.             <li class="justify-fix"></li>
  9.         </ul>
  10.     </div>
复制代码
  可以看到效果:
   

两端对齐布局与text-align:justify

两端对齐布局与text-align:justify-5-技术控-background,项目开发,justify,display,border

   我们看到,两端对齐效果是有了,可是,也有问题,纵向轴线没有对齐,这是因为vertical-align属性默认是baseline值,效果是子元素的基线与父元素的基线对齐。而一个容器元素的基线是指其包含的最后一个行内元素的基线。
   于是我们可以看到实际效果是各个列表项的最后一个行内元素1,2,3,5的基线对齐。
   那么该怎么办呢,我们只需要设置列表vertical-align非baseline就可以完美实现效果。
   如:
  
  1.     .percent-list {
  2.         width: 100%;
  3.         background: #f0f0f9;
  4.         list-style: none;
  5.         font-size: 0;
  6.     }
  7.     .percent-item {
  8.         display: inline-block;
  9.         width: 30%;
  10.         height: 60px;
  11.         margin-right: 5%;
  12.         border: 1px solid lightblue;
  13.         box-sizing: border-box; /* 削去border边框宽度的影响 */
  14.     }0
复制代码
  样式:
  
  1.     .percent-list {
  2.         width: 100%;
  3.         background: #f0f0f9;
  4.         list-style: none;
  5.         font-size: 0;
  6.     }
  7.     .percent-item {
  8.         display: inline-block;
  9.         width: 30%;
  10.         height: 60px;
  11.         margin-right: 5%;
  12.         border: 1px solid lightblue;
  13.         box-sizing: border-box; /* 削去border边框宽度的影响 */
  14.     }1
复制代码
  效果如图:
   

两端对齐布局与text-align:justify

两端对齐布局与text-align:justify-6-技术控-background,项目开发,justify,display,border

   实现两端对齐的方式还有多种多样,欢迎诸位一起交流学习,本次关于两端对齐布局总结就结束了。
壹切全部崩塌 发表于 2016-10-1 10:56:52
沙发抢不到,板凳也行啊!
回复 支持 反对

使用道具 举报

vkvln 发表于 2016-10-2 11:08:13
vkvln就是弹幕
回复 支持 反对

使用道具 举报

lv包包y 发表于 2016-11-14 04:44:10
众里寻他千百度,蓦然回首在这里!
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表