Html 用CSS定位H1和H2
我有一个css布局。我把divs的页眉、内容和页脚放在一个包装器中。问题是浏览器在#content div中显示h1和h2元素，而不是在这些元素实际所在的#头中。由于增加了内容的顶部边距，h1和h2也下降了。为什么会这样？ 我希望这些元素保持水平对齐（一个在右边，另一个在左边），就像电子邮件和Facebook按钮在页脚上一样 以下是HTML：Html 用CSS定位H1和H2,html,css,layout,Html,Css,Layout,我有一个css布局。我把divs的页眉、内容和页脚放在一个包装器中。问题是浏览器在#content div中显示h1和h2元素，而不是在这些元素实际所在的#头中。由于增加了内容的顶部边距，h1和h2也下降了。为什么会这样？ 我希望这些元素保持水平对齐（一个在右边，另一个在左边），就像电子邮件和Facebook按钮在页脚上一样 以下是HTML： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
<!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:"contacto@felipelopez.com.ar"">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:"contacto@felipelopez.com.ar"">contacto@felipelopez.com.ar</a></span>
</div>
</div>
</body>
</html>
谢谢大家! 您已浮动标题，因此包装“标题”没有高度。在页眉的末尾插入一个清除元素，您的问题就会消失：
<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>
费利佩·洛佩斯
迪塞尼奥网
<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>
费利佩·洛佩斯
迪塞尼奥网
溢出：隐藏#标题溢出：隐藏标题