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

I put a header which contains three divs. One has an image and the other two contain text.I then tried putting an image under it which has the same width of the header. But when I first put it, it was over the header div( I thought it should go under it). I then tried pushing it down by increasing the top margin and it worked. But as I increase the width of it the text in the header moves although it is not touching it!

我把一个包含三个div的标题。一个有一个图像,另外两个包含文本。然后我尝试在它下面放一个图像宽度相同的图像。但是当我第一次把它放在标题div上时(我认为它应该在它之下)。然后我尝试通过增加上边距来推低它并且它起作用。但是当我增加它的宽度时,标题中的文字会移动,尽管它没有触及它!

This is the html code:

这是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-->

This is the css code:

这是css代码:

#header {
    height: 6em;
    width:80%;
    background-color: white;
    margin-left:10%;
    margin-right:10%;
    border-bottom:2px solid #BCBBBB;
    margin-bottom:10px;
}

#image{
    margin-left:10%;
    margin-right:10%;
    height:10em;
    width:80%;
}

#logo {
    height:88px;
    width:89px;
}

#name {
    color: #BCBBBB;
    text-align:left;
    float:right;
    font-size:2.7em;
    font-family:sans-serif;
    height:50%;
}

#job {
    color: #BCBBBB;
    text-align:left;
    float:right;
    font-size:0.5em;
    font-family:sans-serif;
    font-weight:bold;
    margin-top:0.2em;
}

Those are my questions:

这是我的问题:

Why doesn't the image automatically go under the header div?

为什么图像不会自动进入标题div?
Why does the text move?

为什么文字会移动?
Why is the top text the one that moved although the one at the bottom is nearer to the image?

为什么顶部文本是移动的文本,尽管底部的文本更接近图像?
What should I do to get the image under the heading div?

如何在标题div下获取图像?
I adjusted the width of the image to 80%. But it seems to be just 20%. Why?

我将图像的宽度调整为80%。但它似乎只有20%。为什么?
Has it got anything to do with position or display?

是否与位置或显示有关?

***Sorry for not adding an image of it but I don't have a reputation of more than 10 ( I am not allowed to).

***很抱歉没有添加它的图像,但我没有超过10的声誉(我不被允许)。

***Sorry for the long questions.( I am still a beginner).

***很抱歉很长时间的问题。(我还是初学者)。

***Your answers would be much appreciated.

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

2 个解决方案

#1

Your question isn't all that clear (please clarify), I will try to answer regardless, but I might misrepresent your question.

你的问题不是那么明确(请澄清),我会尽力回答,但我可能会歪曲你的问题。

1 / 6 . The biggest problem you have I think is that you don't tell the browser how to 'order' the divs. Should they be under eachother or next to eachother? Use the "display" property for this. Use "display: block" to make sure that page-elements like divs or images are stacked under eachother. Depending on the margin the browser uses the remaining space to stack elements next or above eachother.

1/6。我认为你遇到的最大问题是你没有告诉浏览器如何“命令”div。他们应该在彼此之间还是彼此相邻?使用“display”属性。使用“display:block”确保div或图像等页面元素相互堆叠。根据边距,浏览器使用剩余空间来堆叠元素下方或上方。

2 / 3. Because it floats. A float is relative to other elements on the page. If you make it float right, but the content within it align to the left the box goes left while the content within it stays as far to the left as it can keeping with the contraints of the div container. Therefore it seems to move. Lose the float and use "display: block" to make the div be the full width of the header div.

2 / 3.因为它漂浮。浮点数相对于页面上的其他元素。如果你使它向右浮动,但它内部的内容与左边对齐,则框会向左移动,而其中的内容保持在左边,因为它可以与div容器的约束保持一致。因此它似乎移动了。丢失浮动并使用“display:block”使div成为标题div的整个宽度。

#name {
    color: #BCBBBB;
    text-align:left;
    font-size:2.7em;
    font-family:sans-serif;
    height:50%;
    display: block;
    padding-left: 10px;
}

4 / 5 . Lose the "height" property of the image. Because the image has a relative 'height' property next to a relative 'width' property it distorts the image scaling. Use only the width as a percentage and it will scale proportionally.

4/5。丢失图像的“高度”属性。由于图像在相对“宽度”属性旁边具有相对“高度”属性,因此会扭曲图像缩放。仅使用宽度作为百分比,它将按比例缩放。

#2

You are missing a slash. Instead of

你错过了一个斜线。代替

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

it should be:

它应该是:

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

After adding the slash it appears fine to me in Chrome and Firefox (except for the missing images obviously). See fiddle. Does that solve all of your questions?

添加斜杠后,我在Chrome和Firefox中看起来很好(显然除了丢失的图像)。看小提琴。这会解决你所有的问题吗?

#1