文本不在 div 标签中

Question

我已经为上面的一些元素使用了 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>&nbsp;</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&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;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;

}

Answer 1

我动了class="info"你还好吗？

body{
    background-color:#FFFFFFF;
}
.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:10px;
    margin-left:10px;
    width:500px;
    height:170px;
     z-index:2 ;

}
.textoDescri{
    padding-bottom:10px;
    z-index:auto;

}

<!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>&nbsp;</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="info">
                    <p>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 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&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;html5=1&amp;allowfullscreen=true&amp;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>
</body>
</html>

Answer 2

我认为您对代码进行了很多更改，我们可以就什么是好的 html 页面讨论数小时。不管怎样，首先我建议你给一个 "schema" trying to divide your body in 2 macro div。左边一个是您的主要内容，右边一个是您的 sidebar。为此，您必须遵循以下方案：

HTML:

<body>
 <div class"container">
  <div class="main-content">
   <!-- your main content here -->
  </div>
  <div class="sidebar">
   <!-- your sidebar content here -->
  </div> 
 </div>
</body>

CSS:

.main-content {width: 66%; float: left;}
.sidebar {width: 34%; float: right;}

Answer 3

尝试将相对于信息的位置 div 和相对于 textoDescri 的绝对位置

.info{
    background-image:url(images/descrip.png);
    background-repeat:no-repeat;
    margin-top:325px;
    margin-left:10px;
    width:550px;
    height:170px;
    **position:relative**

}
.textoDescri {
    **position:absolute**

}

Codepin

文本不在 div 标签中

Text is not going in the div tag

html

css

text

positioning