使用CSS定位H1和H2

本文介绍了使用CSS定位H1和H2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个CSS布局。我有divs #header，#content和#footer里面#wrapper。问题是，资源管理器在#content div中显示h1和h2元素，而不是在这些元素实际所在的#header中。在增加#content的上限的情况下，h1和h2也下降。为什么会发生？
我想这个元素水平对齐（一个在右边，另一个在左边），就像电子邮件和Facebook按钮在页脚上一样。

I have a css layout. I have the divs #header, #content and #footer inside a #wrapper. The issue is that the explorer shows the h1 and h2 elements inside the #content div, not in #header where these elements actually are. Insofar that increases the top-margin of #content, h1 and h2 go down too. Why could it be happening?I would like that this elements stay horizontally aligned (one at right and the other at left) in the same way that the email and the Facebook button are on the footer.

这是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;[email protected]&quot;">[email protected]</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;[email protected]&quot;">[email protected]</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%;
}

谢谢！

使用CSS定位H1和H2

问题描述

推荐答案