zoukankan      html  css  js  c++  java
  • line-block代替float布局;

    line-block代替float布局;

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

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

    或则这样:

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

    效果图

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

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

    具体应用实例一(text-align:center)

    css

     .container{
         width:100%;
         height:40px;
         padding:0;
         margin:0;
         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>

    效果:

  • 相关阅读:
    OpenSSL 安装 (Linux系统)
    JVM 指令集
    Github清除历史提交,保留最新提交
    php7+apache2.4 安装(window)
    mysql 函数模拟序列
    SpringBoot配置成Liunx服务
    Liunx下NFS服务器的搭建与配置
    Laravel 出现"RuntimeException inEncrypter.php line 43: The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key lengths."问题的解决办法
    win7安装laravel
    win7安装composer
  • 原文地址:https://www.cnblogs.com/mc67/p/5297450.html
Copyright © 2011-2022 走看看