css - 无法水平对齐两个 float div

Question

我是 XHTML 和 CSS 的新手，我无法让 float 工作。不知何故，我总是在 “wrapper” 的下方和右侧以“fondo_header”结尾。

这是 HTML 代码:

<div id="header">
        <div id="wrapper">
            <div id="figure">
                    <img src="images/logo_2nd_225x1182_forWeb.jpg" alt="Logo" width="225" height="118">

            </div>
        </div>
            <div id="fondo_header">
                <div id="nav">
                    <ul>
                        <li><a href="#">Inicio</a></li>
                        <li><a href="#">Servicios</a></li>
                        <li><a href="#">Contacto</a></li>
                        </ul>
                </div>
            </div>

</div>

还有 CSS:

#header{
    margin-top: 20px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
       }

#fondo_header{
       width: 74%;
       float: right;
       background: url(images/header.jpg);

       }

#wrapper{
    width: 250px;
    /*float:left;*/
    height:auto;
    background-color:#f2dfce;
        }

我需要将 "wrapper" 和 "fondo_header" 放在一起。所有 div 的宽度应该是正确的，我也尝试过像素、不同的宽度、添加边距、填充、不同的 float 样式以及太多的东西，但没有任何效果。

我试过 IE9、Chrome 和 FF，结果相同。边距和填充已重置。

我很确定此时我忽略了一些非常明显的东西。 非常感谢任何帮助。

Answer 1

如果你使用 float float 元素的宽度不应超过容器的宽度，否则将在第二行显示

在你的情况下，fondo_header 的 74% + 包装器的 240px 大于标题的宽度 你可以通过将 width of wrapper 设置为 26% 来解决这个问题

或者为两者设置静态值