Html 如何在包含其他div的标题（div）下放置img？

我放了一个包含三个div的标题。一个有图像，另外两个包含文本。然后我试着在它下面放一个与标题宽度相同的图像。但是当我第一次放它的时候，它在头球的上方（我想它应该放在它下面）。然后我试着通过增加最高利润率来降低它，结果成功了。但是当我增加它的宽度时，标题中的文本会移动，尽管它没有接触到它

这是html代码：

    <div id="header">
        <img id="logo" src="....">   <!---the logo at the top right--> 
        <div id="name">JANE DOETTE<div>  <!---the text that moves - top left -->
        <div id="job">Front-End Ninja</div>  <!--under the text that moves but doesn't move--->
    </div>

    <img id="image" src="....">  <!---the image-->

以下是我的问题：

为什么图像不能自动放在标题div下

为什么文本会移动

为什么顶部的文本是移动的文本，而底部的文本更接近图像

我应该怎么做才能得到标题div下的图像

我将图像的宽度调整为80%。但似乎只有20%。为什么?

这和位置或显示有关吗

***很抱歉没有添加它的图像，但我的声誉不超过10（我不允许）

***对不起，问题太长了。（我还是个初学者。）

---

***非常感谢您的回答。

您遗漏了一条斜线。而不是

<div id="name">JANE DOETTE<div>

简·多特 应该是：

<div id="name">JANE DOETTE</div>

简·多特

---

在添加斜杠后，我在Chrome和Firefox中感觉不错（除了明显缺失的图像）。看见这解决了你所有的问题吗？

你的问题不是很清楚（请澄清），我会尽力回答，但我可能会歪曲你的问题

六分之一。我认为你最大的问题是没有告诉浏览器如何“订购”div。他们应该在一起还是在一起？为此使用“显示”属性。使用“display:block”确保div或image等页面元素相互堆叠。根据边距的不同，浏览器使用剩余的空间来堆叠相邻或上方的元素

2/3。因为它是漂浮的。浮动是相对于页面上的其他元素的。如果使其向右浮动，但其中的内容向左对齐，则该框将向左移动，而其中的内容将尽可能保持在与div容器的约束一致的左侧。因此，它似乎在移动。丢失浮动并使用“display:block”使div成为标题div的全宽

#名称{
颜色：#BCBBBB；
文本对齐：左对齐；
字号：2.7em；
字体系列：无衬线；
身高：50%；
显示：块；
左侧填充：10px；
}

<div id="name">JANE DOETTE</div>