如何让两个Div处于同一行

来源:互联网 发布:java 转int 编辑:程序博客网 时间:2024/06/07 16:33

div是块级元素,是独占一行的,一般情况下,两个相邻的div是不会处于一行的


(1)使用float

<style>

      div { 

                 float : left;

             }

</style>


<div style="height : 40px;width : 80px;">

    Div1

</div>


<div style="height : 40px; width : 70px;">

     Div2

</div>



(2)使用inline-block

<style>

        div {

                   display:inline-block ; 

              }

</style>

<div style="height : 40px; width : 70px;">

      Div1

</div>

<div style="height : 40px; width : 70px;">

      Div2

</div>


注意:

(1)为什么要使用display :inline-block;而不是display:inline;因为display:inline导致元素的height和width样式失效

(2)这两种方式的显示效果并不是完全一样的,为什么呢?

         方式二中两个Div中会有大小为8px的margin,这是从body继承过来的


0 0