2010-02-07 199 views
7

En realidad, quería las dos grillas en una div, es decir, una grilla en la derecha, otra en la izquierda ..... pero por ahora la grilla está apareciendo. Es lo mismo que te divides en una mesa con dos filas !! Igual que necesito dividir un div y agregar dos cuadrillas una al lado de la otra. Espero que entiendas mi punto. Agradeciendo a todos por adelantado por su excelente soporte y respuestas¿Cómo dividir un div en dos columnas cuando dividimos una tabla?

Respuesta

16

Cree dos divs dentro de su div principal

<div id="main"> 
<div id="left"></div> 
<div id="right"></div> 
</div> 

Con CSS, fijar cada uno al lado correcto

#left { float:left } 
#right { float:right } 
+2

Esto no se comportará como una tabla. No podrás girar a la izquierda y a la derecha al 100% de altura. – ciembor

5

Todo depende del diseño que desea lograr para esa mesa. Existen múltiples enfoques, cada uno de los cuales arroja resultados ligeramente diferentes.

  1. Puede cambiar la propiedad CSS display en los divs. El mejor valor para usar sería table-cell; sin embargo, este valor no es compatible con ninguna versión de IE. También puede probar los valores inline o inline-block.
  2. Puede hacer que los divs floten hacia la izquierda en su contenedor.
  3. Puede usar el posicionamiento absoluto o relativo de los divs en su contenedor; sin embargo, ese enfoque no funciona bien con los diseños de fluidos.
  4. Puede cambiar a span.
-1

Utilizar una tabla. Tiene más sentido usar tablas donde son más eficientes. Cosas así son para lo que están hechas las tablas, y div no está hecho para.

+6

no; ¡esto es * no * para lo que se hicieron las tablas! –

0

Esta es una expansión de la respuesta aceptada de Omar Abid. Empecé con eso y tuve que hacer más modificaciones para que funcionara en mi ejemplo de la pregunta planteada.

Hice que esto funcione con nombres de clase en lugar de ID, por lo que podría llamar al mismo CSS en varias instancias. Esto me dio la capacidad de simular dos celdas de igual tamaño. En mi ejemplo, configuré un tamaño fijo con ems para que pueda conservar su apariencia a través de una variedad de tamaños de navegador de escritorio y de mesa (en mi CSS móvil, tengo una estrategia diferente).

Para alinear una imagen en el div izquierdo, tuve que hacer un bloque separado (el último en el código CSS).

Esto debería abordar la cuestión en la mayoría de los casos

<div class="BrandContainer"> 
     <div class="BrandContainerTitle"> 
      <h1>...</h1> 
     </div> 
     <div class="BrandContainerImage"> 
      <img alt="Demo image" src="..." /> 
     </div> 
    </div> 

CSS:

.BrandContainer 
{ 
    width: 22em; 
} 
.BrandContainerTitle 
{ 
    vertical-align: top; 
    float: right; 
    width: 10em; 
} 
.BrandContainerImage 
{ 
    vertical-align: top; 
    float: left; 
} 
.BrandContainerImage img 
{ 
    width: 10em; 
} 
Cuestiones relacionadas