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. BZOJ3444: 最后的晚餐

    Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人在举行最后的离别晚餐时,饭店老板觉得十分纠结.因为有m名学生偷偷找他,要求和自己暗恋的同学坐在一起. [问题描述] ...

  2. vim molokai配色方案（调过）

    " Vim color file " " Author: Tomas Restrepo <tomas@winterdom.com> " " ...

  3. Centos 中安装Java

    http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javase6-41940 ...

  4. NSString 处理技巧：分割字符串

    摘要 string类型是objective-c中用的最多的类型之一,有时会出现字符串中有我们不想要的字符. 如 "hello world"中的空格,或是"hello/wo ...

  5. Area Under roc Curve(AUC)

    AUC是一种用来度量分类模型好坏的一个标准. ROC分析是从医疗分析领域引入了一种新的分类模型performance评判方法. ROC的全名叫做Receiver Operating Character ...

  6. 当PHP引擎试图实例化一个未知类的操作

    在PHP开发过程中,如果希望从外部引入一个class,通常会使用include和require方法,去把定义这个class的文件包含进来,但是这样可能会使得在引用文件的新脚本中,存在大量的includ ...

  7. 服务器文件系统一定要用NTFS格式。

    网络中心通过ADSL接入Internet(固定的IP地址), 网站服务通过端口映射放到了内网的两台计算机上,一台IP地址为122.9.6.1,提供Web.FTP.POP3与SMTP服务:另一台IP地址 ...

  8. PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )

    /* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...

  9. Hibernate + proxool 连接数超过最大允许连接数

    主要原因是操作完成没有释放连接,在Hibernate中增加设定 <prop key="hibernate.connection.release_mode">after_ ...

  10. php--某个字符在字符串中的位置比较

    <?php $haystack = 'helloe'; $needle = 'e'; $pos = stripos($haystack, $needle); echo "\n" ...