【发布时间】：2016-03-23 13:15:57
【问题描述】：
我在上面的一些元素中使用了 float:left，但我无法让文本进入 div 位置... 如果您查看图像，您会看到我正在尝试做的事情：将文本放在空灰色框所在的位置..
顺便说一句，这是一个学校项目.. 不要把设计看得太认真.. :)
我将粘贴我的 html 和我的 css：
HTML：
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="js.js" type="text/javascript" ></script>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body onLoad="cargar_pagina()">
<div class="cuerpo">
<p> </p>
<div class="acercaDeArriba">
Luis Jarman <br>
Ivan Ortega <br>
Jose Manuel
</div>
<div class="barraMenu">
<img src="images/RedNormal.png" width="112" height="30" onclick="boton_ferrari()" onMouseOver="this.src='images/RedHover.png';" onMouseOut="this.src='images/RedNormal.png';" alt=""/>
<img src="images/BlackNormal.png" width="112" height="30" onMouseOver="this.src='images/BlackHover.png';" onMouseOut="this.src='images/BlackNormal.png';" onclick="boton_porsche()" alt=""/>
<img src="images/GreyNormal.png" width="112" height="30" onMouseOver="this.src='images/GreyHover.png';" onMouseOut="this.src='images/GreyNormal.png';" onclick="boton_mclaren()" alt=""/>
<img src="images/BlueNormal.png" width="112" height="30" onMouseOver="this.src='images/BlueHover.png';" onMouseOut="this.src='images/BlueNormal.png';" onclick="boton_pagani()" alt=""/>
</div>
<div class="miniaturas">
<table height="289">
<tr>
<td><img id="i1" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
<td><img id="i2" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
</tr>
<tr>
<td><img id="i3" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
<td><img id="i4" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
</tr>
<tr>
<td><img id="i5" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
<td><img id="i6" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
</tr>
<tr>
<td><img id="i7" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
<td><img id="i8" class="mini8" src="images/mini8.png" width="60" height="58" onClick="aumentar(id)" alt=""/></td>
</tr>
</table>
</div>
<div class="framePhoto">
<img id="frameFoto" src="images/porsche/porsche1.jpg" width="300" height="200" alt=""/>
</div>
<div class="navbar">
<h4 class="titulos">PUBLICIDAD FERRARI</h4>
<iframe class="video" width="200" height="135" src="https://www.youtube.com/embed/7HQ7-jnJ0J4? rel=0&controls=0&showinfo=0&autoplay=1&html5=1&allowfullscreen=true&wmode=transparent" frameborder="0" allowfullscreen controls></iframe>
<h4 class="titulos">WEBS oficiales</h4>
<ul>
<li> <a class="enlace" href="http://www.ferrari.com/es_es/">Ferrari</a> </li>
<li> <a class="enlace" href="http://www.porsche.com/spain/">Porsche</a> </li>
<li> <a class="enlace" href="http://www.mclaren.com/">Mclaren</a> </li>
<li> <a class="enlace" href="http://www.pagani.com/">Pagani</a> </li>
</ul>
<img class="volante" src="images/volante.png" width="200" heigt="200" alt=""/>
</div>
<div class="info">
<p class="textoDescri">Ferrari es una compañía de automóviles deportivos con sede en Maranello (Italia). Fue fundada en 1929 por un piloto de autos de competición, Enzo Ferrari, con el nombre de Scuderia Ferrari, construyendo automóviles de competición y, más tarde, en 1947, fabricando autos deportivos.</p>
</div>
</div>
</body>
</html>
CSS：
body{
background-color:#000000;
}
.cuerpo{
height:1200px;
width:800px;
margin-left:auto;
margin-right:auto;
background-image:url(images/background4.png);
background-repeat:no-repeat;
}
.barraMenu{
margin-top:200px;
margin-left:15px;
height:38px;
width:490px;
padding-top:3px;
padding-left:20px;
background-image:url(images/barramenu.png);
background-repeat:no-repeat;
}
.acercaDeArriba{
margin-top:177px;
background-image:url(images/acercade.png);
background-repeat:no-repeat;
height:129px;
width:270px;
float:right;
text-align:center;
font-size:22px;
padding-top:20px;
}
.framePhoto{
background-image:url(images/frameFoto.png);
background-repeat:no-repeat;
width:364px;
height:319px;
text-align:center;
padding-top:50px;
float:left;
margin-left:15px;
}
#frameFoto:hover {
width: 325px;
height: 225px;
}
#frameFoto{
alignment-adjust:central;
width: 300px;
height: 200px;
-webkit-transition: height 1s, width 1s;
}
.miniaturas{
width:130px;
float:left;
margin-left:20px;
margin-top:20px;
}
.container{
display:table;
}
.containerRow{
display:table-row;
}
.navbar{
background-image:url(images/navbar.png);
background-repeat:no-repeat;
width:266px;
height:550px;
float:left;
padding-left:5px;
}
.volante {
margin-left: 25px;
width: 150px;
height: 150px;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
50% {-webkit-transform: rotate(360deg);}
}
/* Standard syntax */
@keyframes mymove {
50% {transform: rotate(360deg);}
}
.video{
vertical-align:top;
margin-top: 0px;
margin-left: 9px;
box-shadow: 0px 7px 2px #888888;
}
.titulos{
margin-left: 10px;
text-shadow: 2px 2px rgba(238,115,115,0.93);
}
@font-face {
font-family: myFirstFont;
src: url(Anita_semi_square.ttf);
}
.enlace{
font-family: myFirstFont;
}
.info{
background-image:url(images/descrip.png);
background-repeat:no-repeat;
margin-top:325px;
margin-left:10px;
width:550px;
height:170px;
}
.textoDescri{
padding-bottom:500px;
}
【问题讨论】：
-
这是您的代码的输出。你在期待什么？
标签： html css text positioning