Question

我正在尝试使用css中的定位，我注意到一些让我感到困惑的事情。这可能是一个愚蠢的问题......但我无法理解它。

我创建了三个div，宽度和高度分别为50px和不同的背景颜色。当我使用margin-top将第三个div放置-60px时，第三个div位于第二个div的顶部。但是，当我创建第一个和第二个div内联元素时，前两个div现在位于第三个div之上。

有人可以向我解释这个概念吗？

<head>
 <style>
    <!-- Divs with the same width and height. Second one where both the first two divs are inline below this one. -->
    #one{
    background-color:red;
    width:50px;
    height:50px;  

     }

    #two{background-color:blue;
    width:50px;
    height:50px; 
     }

    #three{background-color:green;
    width:50px;
    height:50px;
    margin-top:-60px; 
     }
 </style>
</head>
<body>
  <div id="one">
  </div>
  <div id="two">
  </div>
  <div id="three">
  </div>
</body>

<head>
 <style>
    <!-- First two divs are inline  -->
    #one{
    background-color:red;
    width:50px;
    height:50px;  

     }

    #two{background-color:blue;
    width:50px;
    height:50px; 
     }

    #one, #two{display:inline-block;}

    #three{background-color:green;
    width:50px;
    height:50px;
    margin-top:-60px; 
     }
 </style>
</head>
<body>
  <div id="one">
  </div>
  <div id="two">
  </div>
  <div id="three">
  </div>
</body>

Answer 1

我认为这里有两个问题。一个是通过离开第三个div display:block，它将自然地包裹前两个div。有关block与inline-block see here的快速入门。

第二部分是margin-top: -60px height: 50px margin-left: -5px;。负边际基本上是将其向上移动到页面上方。这意味着绿色盒子比红色盒子高出10px（-60 + 50 = -10）。

Example Fiddle - 我添加了{{1}}，你可以看到第三个div从第一个下面偷看了。

使div成为内联元素

1 个答案: