line-block代替float布局；

我们先看看float的一些特性(特征)

当我们改变浏览器的大小会出现这样的效果：

或则这样：

有时候，我们希望，以第一排最高的元素为换行基准时，我们就可以使用display：inline-block属性了滴呀

效果图

不能发现上图中有一个bug，那就是每个元素之间都有空白，解决方法；已经在我们另外一篇博客中记录了

这样的布局算是完成了，接下来，我们看如何实现两端对齐的效果滴啊

具体应用实例一（text-align：center）

css

 .container{

     width:100%;

     height:40px;

     padding:;

     margin:;

     list-style:none;

     background:#eee;

     text-align:center;

 }

 .liStyle{

     color:white;

     width:14px;

     height:14px;

     margin:15px 5px 0 5px;

     background:red;

     display:inline-block;

     cursor:pointer;

 }

html

 <ul class="container">

  <li class="liStyle">1</li>

  <li class="liStyle">2</li>

  <li class="liStyle">3</li>

  <li class="liStyle">4</li>

  <li class="liStyle">5</li>

  <li class="liStyle">6</li>

 </ul>

效果：

 text-align

text-align是用于文字对齐的

接下来，我们看实例：

html

<div class="box1">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really
</div>

<div class="box2">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really
</div>

<div class="box3">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really
</div>

<div class="box4">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really
</div>

css

.box1{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify}

.box2{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:left;}

.box3{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:right;}

.box4{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:center;}

效果：

ps：有些人在测试text-align：justify的时候，发现无效，那是因为，文字还没有容器一行那么宽；

所以，至少要超过一行才能看到text-align：justify的效果滴呀

text-align:justify display:inline-block实现两端对齐

<!DOCTYPE HTML>

<html>

    <head>

        <title>文本两端对齐 by hongchenok</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <style>

            .box{

                width:50%;

                padding:20px;

                margin:20px auto;

                background-color:#f0f3f9;

                text-align:justify;

                text-justify:distribute-all-lines;/*ie6-8*/

            }

            .list{

                width:120px;

                display:inline-block;

                *display: inline;

                *zoom:1;

                padding-bottom:20px;

                text-align:center;

                vertical-align:top;

            }

            .justify_fix{

                display:inline-block;

                *display: inline;

                *zoom:1; width:100%;

                height:0;

                overflow:hidden;

            }

            .list_head{

                height: 50px;

                width: 50px;

                background-color: red;

                float: left;

            }

            .list_content{

                width: 70px;

                height: 50px;

                float: left;

            }

            .clearfix:after {

                content: ".";

                display: block;

                height: 0;

                clear: both;

                visibility: hidden;

            }

            * html .clearfix {height: 1%;}

        </style>

    </head>

    <body>

        <div class="box">

            <div class="list clearfix">

                <div class="list_head"></div>

            </div>

            <div class="list clearfix">

                <div class="list_head"></div>

            </div>

            <span class="justify_fix"></span>

        </div>

        <div class="box">

            <div class="list clearfix">

                <div class="list_head"></div>

            </div>

            <div class="list clearfix">

                <div class="list_head"></div>

            </div>

            <div class="list clearfix">

                <div class="list_head"></div>

            </div>

            <div class="list clearfix">

                <div class="list_head"></div>

            </div>

            <span class="justify_fix"></span>

        </div>

    </body>

</html>

效果：

line-block代替float布局；的更多相关文章

  1. float布局打破标准流,神助攻clear清浮动

    布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css ...

  2. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  3. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  4. 【深入BFC】 关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  5. inline-block和float 布局的选择

    浮动通常表现正常,但有时候搞起来会很纠结.特别是处理内部容器中的浮动,比如对一排图片使用浮动后对齐出现问题.Inline-block是我们的另一种选择.使用这种属性可以模拟部分浮动的特征,而不需要处理 ...

  6. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  7. 关于CSS三列Float布局任务

    任务目标 掌握HTML/CSS布局的概念 掌握盒模型的概念 掌握position与float的概念以及在布局时的用法 任务描述 使用 HTML 与 CSS 按照示意图;实现三栏式布局. 左右两栏宽度固 ...

  8. 十、一行多个：使用float布局的经典方法 ---接（一）

    1.使用float必须要清除float:即在使用float元素的父级元素上清除float. 清除float的方法有三种,在父元素上加:1.width: 100% 或者固定宽度 +overflow:hi ...

  9. 布局方式-float布局

    float的特性一 .元素‘浮动’ .脱离文档流 .但不脱离文本流 首先看一个案例,直观的了解下float的特性 <style> .container{ background: red; ...

随机推荐

  1. 关于Ruby的一些知识

    1 -9/2 ＝ -5 当进行一个除法运算的结果是一个负数的时候,由于Ruby采取向负无穷大圆整,所以结果是-5.而由于除数是个整数,所以结果也是一个整数.而其他语言多数是向0取整. 2 连接字符串建 ...

  2. 解决Apache CXF 不支持传递java.sql.Timestamp和java.util.HashMap类型问题

    在项目中使用Apache开源的Services Framework CXF来发布WebService,CXF能够很简洁与Spring Framework 集成在一起,在发布WebService的过程中 ...

  3. zabbix配置文件详解

    Zabbix之配置文件详解   zabbix配置文件种类: zabbix_server配置文件zabbix_server.conf zabbix_proxy配置文件zabbix_proxy.conf ...

  4. 我装GitHub的过程

    GitHub是老师推荐的没正真的使用过,这次安装也是按提示的,不知对否,且还没使用,只是记录一下自己的过程.我是在线安装的. 1.下载GitHub安装问价,双击开始安装 2.出现的可能是系统相关配置吧 ...

  5. Servlet 编程 请求的转发

    在上篇的基础上,修改servlet *转发只能在同一应用内转发. 将forward 地址改为:youku.com  不能访问 重定向是可以访问外部应用的

  6. ci文件缓存使用，可以用来实现多模板切换 改写URL辅助函数

    //2015年2月28日15:13:41 $this->load->driver('cache', array('adapter' => 'file'));//加载适配器 //请注意 ...

  7. velocity学习记录

    一.引入文件 静态引入:#include("./footer.vm.html") 动态引入:#parse("./header.vm.html") 说明:./为v ...

  8. A trip through the Graphics Pipeline 2011_02

    Welcome back. Last part was about vertex shaders, with some coverage of GPU shader units in general. ...

  9. DS实验题 地鼠安家

    ★实验任务 fd是一个公认的美丽校园.一天,fd来了一群地鼠,编号为1到n,他们希望在这里定居.现在先由第一只地鼠往下打一个单位的距离,并且在那里安家.对于每一个已经安家的地鼠,如果他左下或右下没有邻 ...

  10. js控制input type=checkbox 的勾选

    <script type="text/javascript">     $(function () {         //双击表格弹出窗口         //为jQ ...