Question

我放了一个包含三个div的标题。一个有一个图像，另外两个包含文本。然后我尝试在它下面放一个具有相同标题宽度的图像。但是当我第一次把它放在标题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-->

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

这些是我的问题：

为什么图像不会自动进入标题div？
为什么文字会移动？
为什么顶部文字是移动的文本，虽然底部的文字更接近图像？
如何在标题div下获取图像？
我将图片的宽度调整为80％。但它似乎只有20％。为什么呢？
是否与位置或显示有关？

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

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

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

Answer 1

你错过了斜线。而不是

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

它应该是：

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

添加斜杠后，我在Chrome和Firefox中看起来很好（显然除了丢失的图像）。见fiddle。这会解决你的所有问题吗？

Answer 2

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

1/6。我认为你遇到的最大问题是你没有告诉浏览器如何“命令”div。他们应该在彼此之间还是彼此相邻？使用“display”属性。使用“display：block”确保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。丢失图像的“高度”属性。由于图像在相对“宽度”属性旁边具有相对“高度”属性，因此会扭曲图像缩放。仅使用宽度作为百分比，它将按比例缩放。

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

2 个答案: