css位置：相对div问题

问题描述

| 这是我的代码的一部分： css：

.body .left,.right {
       position:relative;
       z-index:6;
       display:inline-block;
}
.body .left {
       top:0;
       left:0;
       width:100px;
       height:300px;
       margin-right:10px;
       border:1px solid #333;
}
.body .right {
       top:0;
       width:100px;
       height:300px;
       border:1px solid #333;
}

和html

<div class=\"body\">
    <div class=\"left\">
    </div>
    <div class=\"right\">
    </div>
</div>

我希望它们在同一行

top:0;

中，当没有数据添加到

.left

或

.right

div

时效果很好，但问题是当我在

.left

或

.right

div

div中添加文本或其他内容时，div排列不同，请参见示例jsfille了解我在说什么。 查看示例：Jsfiddle     

解决方法

        

.body .left,.body .right {
    display:inline-block;
    vertical-align: top;
}

添加您希望内嵌块具有的显式垂直对齐方式； 工作实例

.body .left,.body .right {
    display:inline-block;
    vertical-align: top;
    width:100px;
    height:300px;
    border:1px solid #333;
}
.body .left {
       margin-right:10px;
}
.body .right {}

如果要为代码支持IE6 / 7，则应添加：

.body .left,.body .right {
   display: inline !ie7;
} 

如果您不愿意使用

!ie7

是一个hack，只需确保这两个类通过条件注释获得值

display: inline

即可。 HTML：

<div class=\"body\">
    <div class=\"left\">
        text
    </div>
    <div class=\"right\">
    </div>
</div>

    ,        只需将

.body .left,.right

display: inline-block

换成

float: left

，一切就可以按您的意愿工作。 看看：http://jsfiddle.net/Zct6S/10/ 我还删除了您的

position: relative

，因为如果您使用float，则不需要它们。