CSS 用display:inline-block代替float: left排版注意事项

<div>
     <div style="display:inline-block">此处显示新 Div1标签的内容</div>
     <div style="display:inline-block">此处显示新 Div2标签的内容</div>
     <div style="display:inline-block">此处显示新 Div3标签的内容</div>
</div>
效果如图：

此处显示新 Div1标签的内容

 

此处显示新 Div2标签的内容

 

此处显示新 Div3标签的内容

在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性；而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。

我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

http://www.w3cplus.com/css/inline-blocks.html

inline-block是什么？

Inline-block是元素display属性的一个值。这个名字的由来是因为，display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。

1. 块级元素（block elements）,来源于CSS盒子模型。块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素，排列方式是水平排列。
2. 行内元素（inline elements）排列方式是水平排列。
3. 行内块元素（inline-block elements）在内部他的表现类似block元素，比如他拥有block元素的width height,padding,border与margin，而外部的排列方式有类似行内元素，即水平排列，而不是像块级元素一样从上到下排列 

！注意！：行内元素，默认按文字底部对齐。


div#left,div#right{
      border-style:solid;
    border-width:3px;
    border-color:#F00;
}
#left{
    width:35%;
    display:inline-block;
    height:300px;
}
#right{
    width:35%;
    display:inline-block;
    height:300px;
}
<div id="left">
    <p>123</p>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
    <hr />
    <hr />
    <hr />
    <hr />
</div>

<div id="right">
    <p>123</p>

</div>

由于采用display:inline-block排版，而行内元素，默认按文字底部对齐。

这种情况用float排版 可以对齐div

#left{
    width:35%;
    float:left;
    height:300px;
    
}
#right{
    width:35%;
    float:left;
    height:300px;
}