0

私はcssレイアウトを持っています。#wrapper内にdiv＃header、＃content、＃footerがあります。問題は、エクスプローラーがh1要素とh2要素を、これらの要素が実際に存在する#headerではなく、＃contentdiv内に表示することです。それが#contentのトップマージンを増やす限り、h1とh2も下がります。なぜそれが起こっているのでしょうか？メールとFacebookボタンがフッターにあるのと同じように、この要素を水平方向に揃えて（1つは右に、もう1つは左に）配置したいと思います。

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%; 
}

ありがとうございました！

4

2 に答える 2

3

overflow: hiddencss に追加することをお勧めします#header。これにより、強制的に子要素を「ラップ」するように展開され、不要なマークアップを必要とせずに展開されます。

于 2012-08-27T18:22:01.430 に答える
0

ヘッダーをフローティングしたため、ラッピング「ヘッダー」には高さがありません。ヘッダーの最後にクリア要素を挿入すると、問題は解決するはずです:

<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>
于 2012-08-27T18:19:42.500 に答える