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 Hash与ActiveSupport’s HashWithIndifferentAccess对于key的区别

    Ruby Hash的key定义的时候是支持symbol或者string的,所以访问的时候只能是symbol或者string其中一种方式. 建议使用symbol定义Hash的key,因为symbol在R ...

  2. CentOS下搭建使用gitlab 和tortoiseGit使用

    gitlab和github 一样很爽的一个东西 关于gitlab在CentOS下的安装方法地址参考: https://github.com/gitlabhq/gitlab-recipes/tree/m ...

  3. Cinder相关命令收集

    1. 重置状态 source admin-openrc.sh cinder reset-state 51108241-7ffe-44a8-acfa-4cddac8d4793

  4. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  5. svchost.exe是什么？为什么一直在运行

    原文:http://www.howtogeek.com/howto/windows-vista/what-is-svchostexe-and-why-is-it-running/ 自己简单翻译了下,图 ...

  6. 《编写可维护的 Javascript》读书笔记（附录 A 部分）：Javascript 编码风格指南（1）原始值

    记录一下比较有用的编码规范(该指南是基于 Java 语言编码规范和 Javascript 编程规范,同时结合作者 Nicholos Zakas 的个人经验和喜好). 一些关于格式(包括缩进.行的长度. ...

  7. python 线程使用

    ################# 线程演示脚本  ####################### #coding=utf-8import threadingfrom time import ctim ...

  8. PHP抓取采集类snoopy介绍

    PHP抓取采集类snoopy介绍 一个PHP的抓取方案 在 2011年07月04日 那天写的     已经有 10270 次阅读了 感谢 参考或原文   服务器君一共花费了14.288 ms进行了2次 ...

  9. 一看就懂的Android APP开发入门教程

    一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载   这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤 ...

  10. 用正则表达式替换html标签

    下面的代码用于修改html文本中的img标记,修改后的html适用于lazyload方式的图片加载: protected string LazyPicProcess(string content) { ...