html - 以内联方式放置对象(显示)

Question

所以，我想通过 CSS 将一些内容放入内联显示中，但我很困惑为什么它不起作用。这是我的代码:

HTML

<div id = "allBody">
  <div id = "image">
    <img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image">
  </div>
  <div id = "line"></div>
</div>

CSS

#allBody {
  display: inline;
}
#image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  padding-right: 30px;
}
#line {
  height: 200px;
  width: 7.5px;
  border-radius: 20px;
  border: none;
  background-color: cornflowerBlue;
}

我想要的是让它们并排显示。代码的工作版本是 here .此外，我正在尝试遵循与电子邮件签名创建者类似的模型 here但是在让这些东西排列起来之后，我并没有试图让它们相同。

这是我希望它看起来像的那种东西的示例(在明智的样式上有点不同):

提前致谢!

Answer 1

除了在#allbody中添加display: inline外，还需要同时在#image和中添加#行(因为它们是您希望内联显示的彼此的 sibling )。除此之外，您还需要 float: right 使其显示在图像的右侧:

#allBody {
  display: inline-block;
}

#image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /*padding-right: 30px; */ /* using padding distorts the image */
  margin-right: 30px; /* added */
  display: inline; /* added */
}

#line {
  height: 200px;
  width: 7.5px;
  border-radius: 20px;
  border: none;
  background-color: cornflowerBlue;
  display: inline; /* added */
  float: right; /* added */
}

<div id = "allBody">
  <div id = "image">
    <img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image">
  </div>
  <div id = "line"></div>
</div>

我还创建了这个 here 的 JSFiddle .

另请注意，您可能正在寻找图像上的 margin-right，而不是 padding-right。使用 margin-right 会偏移蓝线，而 padding-right 会扭曲圆形头像。

希望对您有所帮助! :)