Question

我有两个彼此相邻的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略高于红色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>

可能导致这种情况的原因是什么？（因为它引起了很多混乱，第一个代码是我使用的代码，第二个代码就是我所看到的）

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

Answer 2

请勿混合显示和位置。它主要是/或。

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

如果是，请确保使用vertical-align属性将 divs 全部对齐。

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

内联div正在跳跃

2 个答案: