Este es un problema común y aquí hay una buena tutorial sobre esto.
El problema se vería así:
pero el borde exterior debe contener todos los elementos interiores.
Aquí hay una lista del código:
<html>
<head>
<style type="text/css">
.outer{
border: 0.2em solid #aaa;
margin: 0.1em 0.3em;
width:40%;
display: inline-block;
clear: both;
}
.inner-left{
border: 0.2em solid green;
width: 49%;
float:left;
}
.inner-right{
border: 0.2em solid red;
width: 48%;
float:right;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner-left">
Here are your two boys<br> for getting the job done- the CSS attributes page-break-before and page-break-after. Both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:
</div>
<div class="inner-right">
Here are your two boys for getting the job done- the CSS attributes page-break-before and page-break-after. Both instruct the printer to begin printing a new page, with the difference being before or following the element the attribute is applied to. The possible values the two attributes accept are:
</div>
</div>
</body>
</html>
|
Aquí están sus dos hijos
para hacer el trabajo: los atributos CSS page-break -antes y después de salto de página. Ambos indican a la impresora que comience a imprimir una nueva página, con la diferencia de estar antes o después del elemento al que se aplica el atributo. Los posibles valores que aceptan los dos atributos son:
para hacer el trabajo: los atributos CSS page-break -antes y después de salto de página. Ambos indican a la impresora que comience a imprimir una nueva página, con la diferencia de estar antes o después del elemento al que se aplica el atributo. Los posibles valores que aceptan los dos atributos son:
Aquí están sus dos muchachos para hacer el trabajo: los atributos CSS page-break-before y page-break-after. Ambos indican a la impresora que comience a imprimir una nueva página, con la diferencia de estar antes o después del elemento al que se aplica el atributo. Los posibles valores que aceptan los dos atributos son:
Las siguientes dos líneas resuelven el problema:
display: inline-block; clear: both; |
«clear: both» extiende el margen en la parte superior del cuadro despejado, empujándolo hacia abajo hasta que «despeja» la parte inferior del flotador. En otras palabras, el navegador aumenta el margen superior en el cuadro despejado (sin importar en qué se haya configurado), a la longitud que sea necesaria para mantener el cuadro despejado debajo del flotador.
Aquí hay una lista del valor de la propiedad de visualización.
