diseño de 2 columnas (ancho fijo de la columna izquierda, fluido derecho + claro: ambos)

Solo necesito ayuda, ya que he intentado solucionar esto por años. Lo que necesito:diseño de 2 columnas (ancho fijo de la columna izquierda, fluido derecho + claro: ambos)

Tengo un diseño de 2 columnas, donde la columna izquierda tiene un ancho fijo de 220px y la columna derecha tiene un ancho fluido.

Código es:

<!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> 
    <title>Fluid</title> 
    <style type="text/css" media="screen"> 
     html, body { background: #ccc; } 
     .wrap  { margin: 20px; padding: 20px; background: #fff; } 
     .main  { margin-left: 220px; width: auto } 
     .sidebar { width: 200px; float: left; } 
     .main, 
     .sidebar { background: #eee; min-height: 100px; } 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="sidebar">This is the static sidebar</div> 
     <div class="main">This is the main, and fluid div</div> 
    </div> 
</body> 
</html>

No hay ningún problema en absoluto. Cuando uso una sintaxis de css clear: ambos en la columna de la derecha, todo el contenido se mueve debajo de la columna de la izquierda. Este es un comportamiento correcto y nada en contra de eso.

Pero Relly necesidad de utilizar clara: tanto en la forma, que se mantiene solo en el contexto de la columna de la derecha (no se vea afectado por la columna de la izquierda del todo, y no se mueve por debajo)

¿Hay alguna forma simple de mantener el concepto básico de flotación de diseño de página?

ACTUALIZACIÓN: Por favor, mira este enlace para saber de lo que estoy hablando, ya que puede ser un poco confuso de mi descripción. Enlace: http://jsfiddle.net/k4L5K/1/

Fuente

2011-07-22 Ondrej

Demostración: http://jsfiddle.net/a4xyV/ –

Aquí está tu CSS alterado:

html, body { 
    background: #ccc; 
} 

.wrap { 
    margin: 20px; 
    padding: 20px; 
    padding-right:240px; 
    background: #fff; 
    overflow:hidden; 
} 

.main { 
    margin: 0 -220px 0 auto; 
    width: 100%; 
    float:right; 
} 

.sidebar { 
    width: 200px; 
    float: left; 
    height: 200px; 
} 

.main, .sidebar { 
    background: #eee; min-height: 100px; 
} 

.clear { clear:both; } 
span { background: yellow }

Básicamente lo que he hecho es cambiar la forma en que se realiza el diseño, por lo que .main div es flotó a la derecha. Para ello, hemos tenido que añadir 2 cosas:

Un acolchado de 240px en el .wrap div, y
Un margen derecho en la .main div de -220px para alinear correctamente la parte líquida de la página.

Debido a que hemos planteado la div .main a la derecha, el clear: both; ahora sólo afecta el contenido dentro de la .main div, como desee.

Se puede ver una demostración aquí: http://jsfiddle.net/6d2qF/1/

Fuente

2011-07-23 00:29:06

Esto es lo que he estado buscando. ¡Gracias! ;) – Ondrej

-2

Prueba esto:

<!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> 
    <title>Fluid</title> 
    <style type="text/css" media="screen"> 
     html, body { background: #ccc; } 
     .wrap  { margin: 20px; padding: 20px; background: #fff; } 
     .main  { margin-left: 220px; width: auto } 
     .sidebar { width: 200px; } 
     .main, 
     .sidebar { background: #eee; min-height: 100px; float: left; } 
     .clear {clear:both;} 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="sidebar">This is the static sidebar</div> 
     <div class="main">This is the main, and fluid div</div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

Fuente

2011-07-22 23:39:27 FiveTools

Demostración: http://jsfiddle.net/a4xyV/1/ –

La pregunta es bastante viejo, pero aquí es la otra solución que he encontrado recientemente.

sólo tenemos que hacer 2 cosas:

Añadir overflow: auto; a la .main div
Asegúrese envoltorio preserva el flujo de documentos mediante la adición de overflow: hidden; a la .wrap div, o la adición de .clear div como el último hijo de .wrap elemento

Aquí está el violín actualización: http://jsfiddle.net/k4L5K/89/

Fuente

2017-05-17 09:21:10

diseño de 2 columnas (ancho fijo de la columna izquierda, fluido derecho + claro: ambos)

Respuesta

Cuestiones relacionadas