网页布局：块在一行排列_块级元素div怎么排一行

使两个div代码块在同一行排列，第一种方式采用转换行内块模式display: inline-block;但是由于每一个div标签都是换行写，显示会有空隙，若是不想要空隙则需要将两个div标签写在一行，不利于代码可读性，达咩不行

    <style>
        div{
            width: 100px;
            height: 100px;
            display: inline-block;
        }
     .one {
        background-color: pink;
     }
 
     .two{
        background-color: green;
     }
    </style>
   <div class="one">one</div>
   <div class="two">two</div>

第二中方法，采用float（浮动）的方式，浮动就是漂起来的意思，不占用标准流

    <style>
        div{
            width: 100px;
            height: 100px;
        }
     .one {
        background-color: pink;
        float: left;
     }
 
     .two{
        background-color: green;
        float: left;
     }
    </style>
 <div class="one">one</div>
   <div class="two">two</div>

由于浮动时margin失效，所以想要两个浮动居中，需要设定三个div,看似是两个，实际是三个

此时只添加一个块
<style>
        .center{
            width: 200px;
            height: 100px;
            background-color:blue;
            margin: 0 auto;
        }
    </style>
    <div class="center"></div>

已经居中了，现在添加两个浮动

    <style>
        .center{
            width: 200px;
            height: 100px;
            background-color:blue;
            margin: 0 auto;
        }
        div{
            width: 100px;
            height: 100px;
        }
     .one {
        background-color: pink;
        float: left;
     }
 
     .two{
        background-color: green;
        float: left;
     }
    </style>
   <div class="center">
         <div class="one">one</div>
          <div class="two">two</div>
  </div>

此时两个浮动的块已经居中了。注意！！！！两个浮动的块要写在被覆盖的div中

如果有同学想试试直接采用margin使浮动块居中，可以自己尝试！