Antecedentes y CSS flotadores

StackOverflow https://stackoverflow.com/questions/1495952

  •  19-09-2019
  •  | 
  •  

Pregunta

Así que estoy usando el sistema de la rejilla 960 y encontré algunas cosas que no soportan. He pensado en cambiar a Blueprint, pero tengo que volver al diseño un poco más tarde en el proceso. De todos modos, he simplificado mi código para mostrar lo que estoy experimentando: 

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
    .frame { width: 960px; margin-left: auto; margin-right: auto; }
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
    #bkg { background-color: blue; }
</style>
</head>

<body>
    <div class="frame" id="bkg">
        <div class="column">Column A</div>
        <div class="column">Column B<div><br/><br/><br/><br/></div></div>
        <div class="column">Column C</div>
    </div>
</body>

</html>

Estoy tratando de ver el fondo expanda para cubrir los 3 columnas. ¿Hay algo que pueda hacer para ampliar el fondo de forma que cubra todas las 3 columnas?

¿Fue útil?

Solución

Puede hacer que el flotador marco como en: 

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

y esto lo hace. O puede poner un elemento adicional en el marco con una "solución clara". La rejilla 960 pre-hechos lo hace por usted con una clase de "claro": 

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>

Otros consejos

Sólo tiene que añadir esta regla extra a su selector de: 

div.frame {
     overflow:hidden;
}

No debería ser necesario confiar en la clearfix a menos que tenga elementos procedentes exterior del marco, ni en caso de que tenga que depender de ningún formato sobrantes con clara:. Ambos

Es necesario aplicar la clase clearfix a #bkg. 

<div class="frame clearfix" id="bkg">

Lo que se quiere hacer es "limpiar el flotador." Hay muchas opciones por ahí, algunos fáciles, y algunos bastante complejo.

La forma más fácil, es añadir un div de compensación después de la última columna, de esta manera: 

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

Y debe de trabajo.

Aquí están algunas otras maneras (algunos, css puro):

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top