内联 div 正在跳跃答案

【问题标题】：Inline div is jumping内联 div 正在跳跃
【发布时间】：2015-12-31 19:38:10
【问题描述】：

我有两个相邻的 div (jsfiddle link)：

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

这可能是什么原因造成的？（由于它引起了很多混乱，第一个代码是我使用的代码，第二个代码是我看到的）

【问题讨论】：

display:inline-block 不适用于position:abosolute
1.你的 DOM 不像前面的例子那样正确 container 包含两个 div topLeft 和 topRight 但在你的 code topRight 在 container 之外 2. 如果你想将它们并排放置，那么您为什么要使用position: absolute' and such absurd margin`？
第二个代码只是一个视觉示例。第一个代码给了我第二个代码的（近似）结果。我制作了第二个代码来显示使用第一个代码时得到的结果。
@master2080 那么有什么问题呢？问题出在第一个代码还是第二个？正如 Vivek 和 Vitorino 提到的，第二个代码中存在问题。

标签： html css asp.net

【解决方案1】：

你使用第二个 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>

【讨论】：

第二个代码只是我在第一个代码中得到的视觉示例。我制作了第二个代码来显示我在使用第一个时（大约）得到了什么。

【解决方案2】：

不要混用 display 和 position。主要是非此即彼。

假设您想使用 display 属性工作，有时可能会附加一个小倾斜（如果这是您使用第二个示例想要表达的意思）。

如果是这样，请确保使用 vertical-align 属性将所有 div 对齐。

例如，vertical-align: top 将根据顶部水平对齐所有 div。

【讨论】：

第二个例子只是我看到的结果的视觉表示。第一个是实际代码。
那么，怎么了？你想拿第一还是第二？你不清楚。