Question

我有一个CSS布局。我在#wrapper中有div #header，＃content和#footer。问题是，资源管理器在#content div中显示了h1和h2元素，而不是在#header中显示这些元素。只要增加#content的上限，h1和h2也会下降。为什么会这样？我希望这些元素保持水平对齐（一个在右边，另一个在左边），就像电子邮件和Facebook按钮在页脚上一样。

这是HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Felipe López</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=148925589393";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<div id="wrapper">

    <div id="header">
        <h1 class="divisor_izquierda">Felipe López</h1>
        <h2 class="divisor_derecha">DISEÑO WEB</h2>
    </div>

    <div id="content">

        <h3>Hola!</h3>
        <p>Me llamo Felipe y tengo 21 años. Desde los 15 que aprendo Diseño Web como autodidacta y en la actualidad me encuentro cursando la carrera de <a href="#">Diseño de Multimedios</a>. Podés descargar <a href="#">mi Currículum.</a></p>
        <h3>Qué hago?</h3>
        <p>Los sitios web que diseño y programo tienen las siguientes caracteristicas:</p>
        <ul>
        <li>Sistema de autoadministración.</li>
        <li>Posicionamiento en motores de búsqueda.</li>
        <li>Suscripción y envío de newsletters.</li>
        <li>Indexación con redes sociales.</li>
        <li>Sistema de ecommerce.</li>
        </ul>
        <h3>Algunos trabajos</h3>
        <p><a href="#">www.nicolasgolub.com.ar</a><br />
        Diseño, Maquetacion HTML, Cabecera en Flash, Instalación de Wordpress y creación de Tema para Wordpress. Sitio administrado por el cliente.</p>
        <p><a href="#">www.davidaviles.com.ar</a><br />
        Instalación de Wordpress, instalación y modificación de Tema de Wordpress.</p>
        <p><a href="#">www.luzlo.com.ar</a><br />
        Instalación de Wordpress, instalación y modificación de Tema de Wordpress.</p>
        <p><a href="#">www.movpatriotico.com.ar </a><br />
        Maquetacion HTML y Cabecera en Flash.</p>
        <p><a href="#">www.fiestadelaluz.com.ar</a><br />
        Maquetacion HTML y Cabecera en Flash.</p>
        <h3>Contactame</h3>
        <p> Mandame un email a <a href="mailto:&quot;contacto@felipelopez.com.ar&quot;">contacto@felipelopez.com.ar</a> o un mensaje personal por <a href="https://www.facebook.com/unapersona">Facebook</a>.</p>
      </div> 

    <div id="footer">  

    <span class="divisor_izquierda"><div class="fb-like" data-href="http://www.felipelopez.com.ar" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-action="recommend" data-font="arial"></div></span>

    <span class="divisor_derecha"><a href="mailto:&quot;contacto@felipelopez.com.ar&quot;">contacto@felipelopez.com.ar</a></span>

    </div>

</div>

</body>
</html>

CSS：

* {
    padding: 0px;
    margin: 0px;
}

body {
    background-color: #EBEBEB;
    font-family: Calibri;
    font-size: 16px; 
}

ul {
    text-transform: none;
}

a {
    font-style: italic;
    color: #000;
    text-decoration: none;
}

/*h1 {
    font-size: 36px; 
    position: relative; 
}

h3 {
    margin-top: 20px; 
}

*/

p {
    margin-bottom: 8px;
}

#wrapper {
    width: 1014px;
    margin: 0 auto 0 auto;
    position: relative; 
}

#header {
    position: inherit;
    float: right;
}

#wrapper #header p  {
    color: #F90;
    font-family: Euphemia;
    text-align: center;
    font-weight: normal;
    float: left;
    font-size: 36px;
    clear: both;
    width: 50%;
}

#wrapper #header img {
    float: right;
    width: 30%;
}

#content {
    background-color:#FFF;
    padding: 42px;
    padding-bottom: 34px;
    position: relative; 
}

.divisor_izquierda {
    text-align: left;
    float: left;
    width: 50%;
}
.divisor_derecha {
    text-align: right; 
    float: left;
    width: 50%; 
}

谢谢！

Answer 1

我建议您将overflow: hidden添加到#header css，这会强制它扩展为“包裹”其子元素，并且不需要额外的标记。< / p>

Answer 2

你已经浮动了标题，因此包装“标题”没有高度。在标题的末尾插入一个清除元素，你的问题应该消失了：

<div id="header">
        <h1 class="divisor_izquierda">Felipe López</h1>
        <h2 class="divisor_derecha">DISEÑO WEB</h2>
        <div style="clear: both;"></div>
</div>

用CSS定位H1和H2

2 个答案: