javascript - 图像被推到其包裹的 div 之外

Question

诺贝尔奖颁发给能够弄清楚为什么第二张图片被推到其包裹的 div 之外的人。

我认为我所做的非常简单:

<div class="outerdiv" id="headerbox">
    <div id="uwlogo">
        <img src="uwlogo.png" height="50px"\>
    </div>
    <div id="JaminWEB">
        <h1>JaminWEB</h1>
    </div>  
    <div id="rainer">
        <img src="rainer.jpg" height="50px"\>
    </div>
</div>

与相应的样式表代码

#uwlogo
{
    float: left;
}

#JaminWEB
{
    float: center;
}
#rainer
{
    float: right;
}
h1
{
    color: #FFF;
    font-weight: 400;
    text-align: center;
    margin: auto;
    padding: auto;
}

JFiddle 链接，因为我知道有人会请求一个:http://jsfiddle.net/u7PJj/

Answer 1

要回答发生这种情况的原因有很多:

1. float :中心无效，因此它不是 float 的
2. 您的#JaminWeb 占用了 100% 的宽度，因此迫使您的第三个 float (rainer) 元素换行并向右浮动(在下一行)
3. 您的 headerBox 设置为 50 像素的高度，而 float 不会改变这些尺寸，因此它看起来漂浮在其容器之外。

为了解决这个问题，我建议使用绝对定位而不是 float 。通过这种方式，您的 JaimenWEB div 可以居中并占据全宽，并且 Logo 可以放置在它周围。

#headerbox
{
    width: 80%;
    height: 50px;
    position: relative;
}
#uwlogo
{
    position: absolute;
    left: 5px;
    top: 5px;
}

#JaminWEB
{
    text-align: center;
}
#rainer
{
    position: absolute;
    right: 5px;
    top: 5px;
}

我已经更新了你的 fiddle :http://jsfiddle.net/u7PJj/1/