Question

当我使用float：left。 DIV在顶部完美对齐。但是，当我使用display：inline-block时，它正在推动我的div。为什么是这样？

这是我的index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="test.css">

</head>
<body>

<div id="p1">
<p> test </p>
<p> test </p>
<p> test </p>
<p> test </p>
</div>
<div id="img1"> img </div>
</body>
</html>

这是我的test.css：

#p1{

    display: inline-block;
    width: 300px;
    height: 700px;
    border: 3px solid #73AD21;
}

#img1 {
    background-image: url("http://www.therockstargame.com/z_user_uploads/artwork/single/125_53470.jpg");
    display: inline-block;
    width: 150px;
    height: 90px;
    border: 3px solid #73AD21;
}

Answer 1

从下面的代码段中可以看出，我已使用vertical-align元素的inline-block属性修改了代码。这允许您使用top，middle或bottom作为可能值来控制垂直对齐。 this great overview on CSS Tricks中解释了更多信息和值。

＆＃13;

#p1{

    display: inline-block;
    vertical-align: top;
    width: 300px;
    height: 700px;
    border: 3px solid #73AD21;
}

#img1 {
    background-image: url("http://www.therockstargame.com/z_user_uploads/artwork/single/125_53470.jpg");
    display: inline-block;
    vertical-align: top;
    width: 150px;
    height: 90px;
    border: 3px solid #73AD21;
}

＆＃13;

<div id="p1">
<p> test </p>
<p> test </p>
<p> test </p>
<p> test </p>
</div>
<div id="img1"> img </div>

＆＃13;

Answer 2

使用vertical-align属性来对齐inline-block个元素。

在这里，您可以使用vertical-align: top;与#img1完美对齐。

以下是工作代码段。

＆＃13;

#p1 {
  display: inline-block;
  width: 300px;
  height: 700px;
  border: 3px solid #73AD21;
}

#img1 {
  background-image: url("http://www.therockstargame.com/z_user_uploads/artwork/single/125_53470.jpg");
  display: inline-block;
  width: 150px;
  height: 90px;
  border: 3px solid #73AD21;
  vertical-align: top;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="test.css">

</head>

<body>

  <div id="p1">
    <p> test </p>
    <p> test </p>
    <p> test </p>
    <p> test </p>
  </div>
  <div id="img1"> img </div>
</body>

</html>

＆＃13;

为什么内联块推动我的div：

2 个答案: