html - CSS 位置 :relative div problem

Question

这是我的代码的一部分:

样式:

.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>

当没有数据添加到.left或.right时，我希望它们在一行top:0; div 效果很好，但问题是当我向 .left 或 .right div 添加文本或其他内容时> div 的排列方式不同，请参阅 jsfille 上的示例以了解我在说什么。

查看示例: JsFiddle

Answer 1

只需用 float: left 替换你的 .body .left, .right display: inline-block 一切都应该像你想要的那样工作.看看:http://jsfiddle.net/Zct6S/10/

我还删除了您的 position: relative，因为如果您使用 float，则不需要它们。