0

我对 XHTML 和 CSS 很陌生，我无法让花车工作。不知何故，我一直在 "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 的宽度都应该是正确的，我也尝试过像素、不同的宽度、添加边距、填充、不同的浮动样式和太多的东西，但没有任何效果。

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

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

4

3 回答 3

0

#fondo_header您必须同时#wrapper向左浮动。当您浮动元素时，您必须overflow: hidden在父元素上进行设置，以便它适合其内容的高度。
看看这个，它会帮助你更好地理解浮点数：All About Floats。
编辑：#wrapper向左和#fondo_header向右浮动也可以。

于 2013-01-03T20:20:58.160 回答
0

只要标题足够小以适合我，似乎对我来说工作正常。你确定你给每个元素足够的空间吗？对一个元素的宽度使用百分比，对另一个元素使用像素将根据您的屏幕宽度为您提供不同的结果。

#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/

于 2013-01-03T20:21:57.583 回答
0

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

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

或为两者设置静态值

于 2013-01-03T20:22:09.680 回答