Question

这是我的代码的一部分：

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的排列方式不同，请参阅jsfille上的示例以了解我在说什么。

查看示例： JsFiddle

Answer 1

只需将.body .left, .right display: inline-block替换为float: left，一切都应该按照您的意愿运作。看看：http://jsfiddle.net/Zct6S/10/

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

Answer 2

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

添加您希望内联块具有的显式垂直对齐;

Working example

.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是一个黑客攻击，如果您不想使用 - 只需确保这两个类通过条件注释获得值display: inline ...无论您喜欢什么;）

HTML：

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

css位置：相对div问题

2 个答案:

Working example