Html 以内联方式放置对象（显示）

所以，我想通过CSS在内联显示中添加一些内容，但我不明白为什么它不起作用。这是我的密码：

HTML

我想要的是让它们相邻显示。代码的工作版本为。此外，我正试图遵循一个类似的模式，以电子邮件签名的创造者，但在得到的东西排队等，我不试图使他们相同

下面是一个我希望它看起来像的东西的例子（在样式方面有点不同）：

---

提前谢谢

除了将

display:inline

添加到

#allbody

，您还需要将其添加到

#image

和

#line

（因为它们是您希望内联显示的彼此的兄弟）。除此之外，您还需要在线上显示

float:right

，以便将其显示在图像右侧：

#全身{
显示：内联块；
}
#形象{
宽度：200px；
高度：200px；
边界半径：50%；
/*右填充：30px；*/*使用填充会扭曲图像*/
右边距：30px；/*已添加*/
显示：内联；/*已添加*/
}
#线{
高度：200px；
宽度：7.5px；
边界半径：20px；
边界：无；
背景颜色：矢车菊蓝；
显示：内联；/*已添加*/
浮动：右；/*已添加*/
}

---

除了将

显示：内联

添加到

#allbody

，您还需要将其添加到

#image

和

#line

（因为它们是您希望内联显示的彼此的兄弟）。除此之外，您还需要在线上显示

float:right

，以便将其显示在图像右侧：

#全身{
显示：内联块；
}
#形象{
宽度：200px；
高度：200px；
边界半径：50%；
/*右填充：30px；*/*使用填充会扭曲图像*/
右边距：30px；/*已添加*/
显示：内联；/*已添加*/
}
#线{
高度：200px；
宽度：7.5px；
边界半径：20px；
边界：无；
背景颜色：矢车菊蓝；
显示：内联；/*已添加*/
浮动：右；/*已添加*/
}

---

一个简单的解决方案是删除

img

标记周围的DIV-默认情况下图像是内联的（顺便说一句：您不应该有两个ID相同的元素，这是无效的HTML），然后添加

显示：内联块到您的
#行
元素：

（并从包装DIV
#allBody
中删除
inline
）


#图像{
宽度：200px；
高度：200px；
边界半径：50%；
右侧填充：30px；
}
#线{
高度：200px；
宽度：7.5px；
边界半径：20px；
边界：无；
背景颜色：矢车菊蓝；
显示：内联块；
}
一个简单的解决方案是删除
img
标记周围的DIV-默认情况下图像是内联的（顺便说一句：您不应该有两个ID相同的元素，这是无效的HTML），然后添加
显示：内联块到您的
#行
元素：

（并从包装DIV
#allBody
中删除
inline
）


#图像{
宽度：200px；
高度：200px；
边界半径：50%；
右侧填充：30px；
}
#线{
高度：200px；
宽度：7.5px；
边界半径：20px；
边界：无；
背景颜色：矢车菊蓝；
显示：内联块；
}

你能提供一个你想让它看起来像什么的截图吗？你能提供一个你想让它看起来像什么的截图吗？
<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>

#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;
}