百分比实现

首先最简单的是使用百分比实现，如下一个展示列表：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

              .list{

                      width: %;

                   background: #f0f0f9;

                   list-style: none;

                   font-size: ; /* 去掉边框的影响 */

                }

                .img{

              display: inline-block;

         width: %;

         height: 60px;

         margin-right: %;

         border: 1px solid lightblue;

         box-sizing: border-box; /* 削去border边框宽度的影响 */

        text-align: center;

                }

         </style>

     </head>

     <body>

           <div class="box">

                  <ul class="list">

                         <li class="img"><img src="img/HBuilder.png" alt="" /></li>

                          <li class="img"><img src="img/HBuilder.png" alt="" /></li>

                           <li class="img" style="margin-right: 0;"><img src="img/HBuilder.png" alt="" /></li>

                  </ul>

           </div>

     </body>

 </html>

效果：

这样当然很简单，而且也不会存在什么兼容性问题，但是其他问题还有很多：

定宽的列表，效果很难实现

如果内部img元素宽度不是100%且需要实现两端对齐，效果很难实现

如果列表项数量是动态的，效果不能实现

flex实现

第二种实现方式就比较先进了，除了需要学习flex相关知识，使用还是很简单的，实现两端对齐效果，关键点是在flex容器上使用justify-content属性，并将其值设为space-between;

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

              .list{

                  display: -moz-box;

                     display: -webkit-box;

                     display: -webkit-flex;

                     display: -moz-flex;

                     display: -ms-flexbox;

                     display: -ms-flex;

                     display: flex;

                     -webkit-box-pack: justify;

                     -moz-box-pack: justify;

                     -ms-flex-pack: justify;

                     -webkit-justify-content: space-between;

                     -moz-justify-content: space-between;

                     -ms-justify-content: space-between;

                     justify-content: space-between; display: flex;

                  justify-content: space-between;

                }

                .img{

                  display: block;

                }

         </style>

     </head>

     <body>

           <div class="box">

                  <ul class="list">

                         <li class="img"><img src="img/HBuilder.png" alt="" /></li>

                          <li class="img"><img src="img/HBuilder.png" alt="" /></li>

                           <li class="img" style="margin-right: 0;"><img src="img/HBuilder.png" alt="" /></li>

                  </ul>

           </div>

     </body>

 </html>

text-align:justify实现

另外一种要介绍的是使用text-align:justyle;实现方式。

我们知道text-align:justify;效果是实现文字两端对齐,如。

两端对齐布局与text-align:justify的更多相关文章

  1. text-align:justify实现文本两端对齐布局,兼容IE

    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念.大多 IE下的显示错误,就是源于 haslayout. 什么是 haslayout ...

  2. css两端对齐——div+css布局实现2端对齐的4种方法总结

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...

  3. 兼容IE的两端对齐

    div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构 实现demo里面的div通过Css进行2端对齐. <div class=" ...

  4. display：inline-block两端对齐 实现列表

    做一个ul li 列表类似这样的平时经常会用到 要是用浮动做还是比较简单的直接左右浮动,清除浮动就可以搞定了,因为最近用display:inline-block用的比较顺手,所以就尝试一下.通过tex ...

  5. 一行两端对齐justify-content

    一.之前不了解css3的属性,更没听过flex布局 在处理表单前面的文字,两端对齐,按照我之前的前端人员,加空格处理,但是在不浏览器解析空格的宽是不一样的 上图就用空格,在不同浏览器显示的效果,有时候 ...

  6. CSS3单行文本两端对齐

    CSS3实现单行文本两端对齐 p { height: 24px; text-align: justify; text-last-align: justify; } p::after { display ...

  7. 自适应的两端对齐：text-align:justify

    <!DOCTYPE HTML> <html> <head> <title>文本两端对齐 by hongchenok</title> < ...

  8. text-align:justify 两端对齐

    今天看页面发现一个以前没用过的css属性text-align:justify,查了一下非常实用,是一个实现文本两端对齐的属性. 使用前: 使用后: 看了一些文章还有结合inline-block+tex ...

  9. 完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐

    text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...

随机推荐

  1. sublime 2中Package control安装和使用

    安装: 安装时,如果想查看安装进度,可打开console(View->Show Console) 安装Package control有两中方法: 方法1:通过代码安装 import urllib ...

  2. UGUI和现实世界的比例关系

    之前测试过默认大小的 Cube 在现实中的 比例关系,得出基本单位为 m 的结论,至于 UGUI和现实世界的比例关系 看下图就知道了: Cube Collider 的大小: Button 的大小: 其 ...

  3. Chapter 21_5.1 URL编码

    URL编码是http所使用的一种编码方式,用于在一个URL中传送各种参数.该编码方式会将特殊字符("=","&","+")编码为&q ...

  4. ios开发之滑动长图截全屏应用

    最近做项目遇到要求截取图片长度超出手机屏幕,即可滑动的长图截屏,这里简单说一下解决思路,下面附带Demo下载地址. ,当我们要截全屏时,将滑动视图的frame以及偏移量记录下来,然后将滑动视图偏移量设 ...

  5. 5754Life Winner Bo

    给定一个n*m的矩阵,有四种棋子(国际象棋的王,王后,骑士,车).起点在(1,1)先走到(n,m)获胜. 分析:车是nim博弈.王后是威佐夫博弈.王和骑士写两个1000*1000的预处理即可. hdu ...

  6. C# 语言规范_版本5.0 (第10章 类)

    1. 类 类是一种数据结构,它可以包含数据成员(常量和字段).函数成员(方法.属性.事件.索引器.运算符.实例构造函数.静态构造函数和析构函数)以及嵌套类型.类类型支持继承,继承是一种机制,它使派生类 ...

  7. JDK7 LinkedList源代码分析

    transient int size = 0; /** * Pointer to first node. * Invariant: (first == null && last == ...

  8. linux基础-安装篇

    linux现在的版本已经升级到7.x的版本了,现在虽然企业还是使用6.x的版本,但是未来的趋势肯定是往7的方向发展的,很多的培训机构或者一些学校的课程也都更新的7的版本进行教学,下面的安装实例就是以7 ...

  9. cmake+qt+qtcreator的配置，解决Q_OBJECT的问题

    1.如果在编译qt项目的时候,一般头文件里都有Q_OBJECT,但是用cmake来编译的时候,就会报错,那么怎么解决呢? 解决的办法就是要在cmake里面写好配置 命令,再编译的时候,就不会报错了,写 ...

  10. 转换汉字为字符原始码 如：汉字 -> &#27721;

    $output = mb_convert_encoding($str, 'HTML-ENTITIES', $encode);$encode为输入的比如utf-8,因为utf-8可以包括英文,中文等字符 ...