内联DIV是跳跃

我有被并排放置其他（jsfiddle link）两个div：内联DIV是跳跃

<div class="container" style="display:block;"> 
    <div class="topLeft" style="border:1px solid red; display:inline-block;" > <a runat="server" href="~/">IMAGE<br> 
     IMAGE</a> </div> 
    <div class="topRight" style="border:1px solid blue; display:inline-block;"> 
     <div class="topTop" style="display:block;">%</div> 
     <div class="topBottom" style="display:block;">#</div> 
    </div> 
</div>

在这个例子中是没有问题的，但我看到的是蓝色的div将略高于置于红色的一个（视觉例子 [jsfiddle link]）：

<div class="container" style="display:block; margin-top:20px;"> 
    <div class="topLeft" style="border:1px solid red; display:inline-block;" > <a runat="server" href="~/">IMAGE<br> 
     IMAGE</a> </div> 
</div> 
<div class="topRight" style="border:1px solid blue; position:absolute; margin-left:60px; margin-top:-50px; display:inline-block;"> 
    <div class="topTop" style="display:block;">%</div> 
    <div class="topBottom" style="display:block;">#</div> 
</div>

什么可能导致这种情况？（因为它导致如此多的混淆，第一个代码是我使用的代码，第二个代码就是我所看到的）

来源

2015-12-31 master2080

'display：inline-block' does not work with'position：abosolute' –

1.你是不是像前面的例子'容器一样，DOM包含div' topLeft'和'topRight'，但在你的*代码*'topRight'在'容器'之外 2.如果你想并排摆放它们，那你为什么要用'position：absolute'和这个荒谬的'margin'？ – vivekkupadhyay

第二个代码只是一个可视化的例子..第一个代码给了我第二个（近似）的结果。我做了第二个代码来展示我在使用第一个代码时得到的结果。 – master2080

使用第二个div margin-top：-50px会犯错误。

使用下面的代码：

<div class="topRight" style="border:1px solid blue; position:absolute; margin-left:10px; display:inline-block;float:left"> 
        <div class="topTop" style="display:block;">%</div> 
        <div class="topBottom" style="display:block;">#</div> 
       </div>

来源

2015-12-31 10:50:26

第二个代码只是我在第一个代码中获得的视觉示例。我做了第二个代码来显示我（大约）在使用第一个时获得的内容。 – master2080

不要混用显示和位置。它主要是/或者。

假设你想使用display属性，一个小的倾斜可以追加有时（如果这是你想通过你的第二个例子说）。

如果确实如此，请确保通过使用vertical-align属性将您的div div整合在一起。

例如，vertical-align: top将基于其顶部水平对齐所有div div。

来源

2015-12-31 11:19:42

第二个例子只是我看到的结果的可视化表示。第一个例子是实际的代码。 – master2080

那么，怎么了？你想获得第一个还是第二个？你不清楚。 –

第一个代码是我使用的，第二个是我看到的.. – master2080

内联DIV是跳跃

回答

相关问题