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. SQL中的charindex()方法

    CHARINDEX函数返回字符或者字符串在另一个字符串中的起始位置.CHARINDEX函数调用方法如下: CHARINDEX ( expression1 , expression2 [ , start ...

  2. github配置

    注册github账号: 准备秘钥文件: 认证: https://github.com 测试秘钥: 创建仓库: 执行下面命令创建git远程仓库: 添加一个two.txt文件:

  3. Css - Table.css

    基本的Table样式 .gridtable { border: solid #ccc 1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; ...

  4. workerman是一个高性能的PHP socket服务器框架

    workerman-chatorkerman是一款纯PHP开发的开源高性能的PHP socket服务器框架.被广泛的用于手机app.手游服务端.网络游戏服务器.聊天室服务器.硬件通讯服务器.智能家居. ...

  5. linux网卡设置详解

    centos7安装之后是需要在网卡配置文件中开始网络连接 onboot =yes 刚开始时网卡获取IP模式是dhcp 你会发现ifconfig不能用,猜测是废弃了,你要yum install net- ...

  6. 在windows下使用gnu的工具

    mingw Minimalist GNU for Windows http://www.mingw.org/ 想要在Windows使用wget,之前使用的是单独的安装包,现在又想使用bash的命令提示 ...

  7. RT-Thread信号量的基本操作

    抽象的来讲,信号量的特性如下:信号量是一个非负整数(车位数),所有通过它的线程/进程(车辆)都会将该整数减一(通过它当然是为了使用资源),当该整数值为 0 时,所有试图通过它的线程都将处于等待状态.在 ...

  8. HTML: 字體設置

    針對 font-family 屬性進行詳細設置, 首先我們要瞭解,字體分類: ①無襯線字體: san-serif,一般用於文章標題 ②有襯線字體: serif,一般用在段落處或者非標題部分 當我們設置 ...

  9. Solr定时更新

    今天用到solr定时重建索引和增量更新技术,就从网上搜了一些资料,在这里给大家整理了一下,也经过了自己的测试,没有异常. Solr官方提供了很强大的Data Import Request Handle ...

  10. nginx服务器安装与启动

    nginx服务器介绍 1.nginx服务器功能 nginx服务器可以扮演:轻量级的web服务器.应用服务器.代理服务器.反向代理服务器.后台服务器.CDN缓存服务器 nginx的基本模块: 内核模块C ...