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

要回答为什么会发生这种情况：

float：center无效，因此不会浮动
你的#JaminWeb占据了100％的宽度，因此迫使你的第三个浮动（rainer）元素包裹并向右浮动（在下一行）
您的headerBox设置为50px的高度，float不会更改这些尺寸，因此它似乎浮动在其容器之外。

要修复它，我建议使用绝对定位而不是浮动。通过这种方式，您的JaimenWEB div可以居中并占据整个宽度，并在其周围放置徽标。

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

我已经更新了你的小提琴：http://jsfiddle.net/u7PJj/1/

Answer 2

试试这个

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

图像被推入其包裹的div之外

2 个答案: