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>
  • 相关阅读:
    SQL 操作总结
    WaitHandle.WaitOne的第二参数
    java泛型测试
    生成商品静态页的类和方法
    CodeSmith4.1在控制台根据模板生成文件
    Eclipse中最常用的热键
    struts2的struts.properties配置文件详解 (转)
    eclipse rcp 多线程
    eclipse RPC加载Spring 容器
    使用Apache+tomcat比单独使用tomcat能带来什么样的好处及坏处
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/5234986.html
Copyright © 2011-2022 走看看