zoukankan      html  css  js  c++  java
  • 让div排成一行===>inline-block的兼容性

    行内元素,排列在一行,但是不能设置它的width、height、margin、padding属性,即使设置了,也是不生效的。

    快元素独占一行,如下的这个例子,before div、in div1、in div2、after div分别占一行,也就是说,块元素前后都不能有行内元素和文本节点。

        before div<div style="display:inline-block">in div1</div> <div style="display:inline-block">in div2</div> after div

    那么如何让div 可以排列在一行呢?

    用如下的方式:

    div{
         display:inline-block;//如果网站只兼容谷歌和火狐,这样写就可以
    }
    div{
         display:inline-block;//但是IE不支持inline-block,需要这么写,这样写3个浏览器
                                     //就可以都兼容了
         *display:inline;
         *zoom=1;
    }

    而且:当我们对div设置成了inline-block的时候,同样可以对其设置width、height属性,如果要让其居中,就不需要margin:0 auto;了,因为他具有了inline的特性,所以用text-align:center就行了。

    例子:如下代码,执行之后,里面的div就是居中的,有宽,有高。

    <div style="border:solid;500px;height:400px;text-align:center;">
            <div style="border: solid;  300px; height: 200px;display:inline-block;">inline-block div</div>
        </div>

    当我们对一个行内元素<span>设置成inline-block的时候,它也是可以有宽有高的(当我们不设置成inline-block的时候,它默认是inline,给他设置宽高,没效果)

    <span style="border: solid;  300px; height: 200px;">The Span hava width and height</span>
  • 相关阅读:
    weblogic.xml 精妙设置
    mysql --> select * from Employee group by name这样的语法有什么意义?
    oracle pctfree和pctused详解
    超详细 SpringMVC @RequestMapping 注解使用技巧
    Spring 注解概览
    Js替换字符串中的所有空格
    面试题精选
    Axure RP Extension for Chrome修复
    【javascript】获取 格式化时间
    万能清除浮动
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/5234986.html
Copyright © 2011-2022 走看看