內聯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是跳躍

回答

相關問題