0
CSS 레이아웃이 있습니다. div #header, #content 및 #footer가 # 래퍼 안에 있습니다. 문제는 탐색기가 실제로 #header가 아닌 #content div 안에 h1 및 h2 요소를 표시한다는 것입니다. 그 정도면 #content의 상단 여백이 증가하므로 h1과 h2도 내려갑니다. 왜 그런 일이 일어날 수 있습니까? 전자 메일 및 Facebook 단추가 바닥 글에있는 것과 같은 방식으로이 요소가 수평으로 정렬 된 채로 (오른쪽과 다른 한쪽에 하나씩) 유지 되길 바랍니다.CSS로 H1과 H2 위치 지정
<!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:"[email protected]"">[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:"[email protected]"">[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%;
}
감사합니다 여기
는 HTML입니다!
여기에서 다양한 솔루션을 찾을 수 있습니다. http://stackoverflow.com/a/1633170/423259 – js1568
왜 #header DIV를 플로팅 하시겠습니까? 아마 당신이보고있는 문제를 일으키는 원인 일 것입니다. 그렇게하려는 경우 다음 블록 요소가 플로트를 지워야합니다. –