Question

我是XHTML和CSS的新手，我无法使用浮动工具。不知何故，我一直以＆＃34; fondo_header ＆＃34;在＆＃34;包装＆＃34; 的右下方。

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

我需要将＆＃34;包装＆＃34; 和＆＃34; fondo_header＆＃34; 放在彼此旁边。所有div的宽度应该是正确的，我也尝试过像素，不同的宽度，添加边距，填充，不同的浮动样式和太多的东西，但没有任何作用。

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

我很确定在这一点上我忽略了一些非常明显的东西。任何帮助非常感谢。

Answer 1

您必须将#fondo_header和#wrapper向左浮动。当你浮动元素时，你必须在父元素上设置overflow: hidden，因此它适合其内容的高度。
看看这个，它会帮助你更好地理解花车：All About Floats 修改：左侧浮动#wrapper，右侧浮动#fondo_header也可以。

Answer 2

只要标题小到足以适合我，似乎对我有效。你确定你给每个元素足够的空间吗？使用一个元素宽度的百分比和另一个元素的像素将根据您的屏幕宽度给出不同的结果。

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

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

       }

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

http://jsfiddle.net/ARvw3/

Answer 3

以防你使用浮动浮动元素的宽度不应超过容器的宽度，否则将进入第二行

在你的情况下74％的fondo_header + 240px的包装器大于标头的宽度你可以通过将包装器的宽度设置为26％

来解决这个问题

或为两者设置静态值

无法水平对齐两个浮动div

3 个答案: