Foros del Web » Creando para Internet » CSS »

varias columnas de la mism altura

 Estas en el tema de varias columnas de la mism altura en el foro de CSS en Foros del Web. hola amigos estoy haciendo un grid usando <div> tengo varias columnas todo va bien mi problema es como puedo hacer que todas las columnas tengan ...
  #1 (permalink)  
Antiguo 04/08/2011, 10:07
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 21 años, 5 meses
Puntos: 21
Pregunta varias columnas de la mism altura
hola amigos estoy haciendo un grid usando <div>
tengo varias columnas todo va bien mi problema es
como puedo hacer que todas las columnas tengan la misma
altura y el texto quede centrado este es mi script



Uploaded with ImageShack.us


Código CSS: 
Ver original
  1. .filasCalif
  2. {
  3.     top: 30px;
  4.     width:1241px;   
  5.     margin:0px; 
  6.     position: absolute; 
  7.     z-index:10;
  8.     line-height:20px
  9. }
  10.  
  11. .header_fila{
  12.     width:1241px;   
  13.     border-bottom: 1px solid #686868;
  14.     font-family:Arial, Helvetica, sans-serif;
  15.     font-weight:bold;           
  16. }
  17.  
  18. .header_fila_prim{
  19.     float:left;
  20.     width:1241px;   
  21.     background-color: #C0C0C0;
  22.     border: 1px solid #686868;
  23.     border-right:0px;
  24.     border-left:0px;
  25. }
  26.  
  27. .primero_fila {
  28.     float:left;
  29.     width:296px;
  30.     border-right: 1px solid #686868;
  31.     border-bottom: 1px dashed #686868;  
  32.     font-family:Arial, Helvetica, sans-serif;
  33.     font-weight:bold;       
  34. }
  35.  
  36. .primero_fila_irregular {
  37.     float:left;
  38.     width:296px;
  39.     border-right: 1px solid #686868;
  40.     border-bottom: 1px dashed #686868;  
  41.     font-family:Arial, Helvetica, sans-serif;
  42.     font-weight:bold;   
  43.     color:#800000;
  44. }
  45.  
  46. .segundo_fila {
  47.     float:left;
  48.     width:68px; 
  49.     border-right: 1px solid #686868;
  50.     border-bottom: 1px dashed #686868;  
  51.     font-family:Arial, Helvetica, sans-serif;
  52.     font-weight:bold;
  53. }
  54.  
  55. .tercero_fila {
  56.     float:left;
  57.     width:92px;
  58.     border-right: 1px solid #686868;
  59.     border-bottom: 1px dashed #686868;  
  60.     font-family:Arial, Helvetica, sans-serif;
  61.     font-weight:bold; 
  62. }
  63.  
  64. .cuarto_fila {
  65.     float:left;
  66.     width:100px;;
  67.     border-right: 1px solid #686868;
  68.     border-bottom: 1px dashed #686868;  
  69.     font-family:Arial, Helvetica, sans-serif;
  70.     font-weight:bold;    
  71. }
  72.  
  73. .quinto_fila {
  74.     float:left;
  75.     width:8px;;
  76.     border-right: 1px solid #686868;
  77.     border-bottom: 1px dashed #686868;  
  78.     font-family:Arial, Helvetica, sans-serif;
  79.     font-weight:bold;  
  80. }
  81.  
  82. .sexto_fila {
  83.     float:left;
  84.     width:55px;;
  85.     border-right: 1px solid #686868;
  86.     border-bottom: 1px dashed #686868;  
  87.     font-family:Arial, Helvetica, sans-serif;
  88.     font-weight:bold;     
  89. }
  90.  
  91. .siete_fila {
  92.     float:left;
  93.     width:30px;;
  94.     border-right: 1px solid #686868;
  95.     border-bottom: 1px dashed #686868;  
  96.     font-family:Arial, Helvetica, sans-serif;
  97.     font-weight:bold;  
  98. }
  99.  
  100. .siete_fila_fin {
  101.     float:left;
  102.     width:30px;;    
  103.     border-right:0px;
  104.     border-bottom: 1px dashed #686868;  
  105.     font-family:Arial, Helvetica, sans-serif;
  106.     font-weight:bold;
  107. }
  108.  
  109. .fecha_fila {
  110.     float:left;
  111.     width:90px; 
  112.     border-right: 1px solid #686868;
  113.     border-bottom: 1px dashed #686868;  
  114.     font-family:Arial, Helvetica, sans-serif;
  115.     font-weight:bold;   
  116. }
  117.  
  118. <div class="header_fila">
  119.                         <div class="header_fila_prim"><span class="campos_form_label">***</span></div>                      
  120.                     </div>  
  121.                     
  122.                     <!-- materia -->                                        
  123.                     <div class="primero_fila">
  124.                         <span class="campos_form_label">Sistemas de Almacenamiento y Manejo de Carga en Puertos</span>
  125.                     </div>
  126.                     <!-- grado -->
  127.                     <div class="segundo_fila" align="center">
  128.                         <span class="campos_form_label">-</span>
  129.                     </div>
  130.                     <!-- clave -->
  131.                     <div class="tercero_fila" align="center">
  132.                         <span class="campos_form_label">-</span>
  133.                     </div>
  134.                     <!-- seriacion -->
  135.                     <div class="cuarto_fila" align="center">
  136.                         <span class="campos_form_label">-</span>
  137.                     </div>
  138.                     <!-- 1 -->
  139.                     <div class="quinto_fila" align="center">
  140.                         <span class="campos_form_label" >-</span>
  141.                     </div>
  142.                     <!-- ciclo -->
  143.                     <div class="sexto_fila" align="center">
  144.                         <span class="campos_form_label">-</span>
  145.                     </div>
  146.                     <!-- calif -->
  147.                     <div class="siete_fila" align="center">
  148.                         <span class="campos_form_label">-</span>
  149.                     </div>
  150.                     
  151.                     <!-- repite -->
  152.                     <div class="quinto_fila" align="center">
  153.                         <span class="campos_form_label">-</span>
  154.                     </div>
  155.                     <div class="sexto_fila" align="center">
  156.                         <span class="campos_form_label">-</span>
  157.                     </div>
  158.                     <div class="siete_fila" align="center">
  159.                         <span class="campos_form_label">-</span>
  160.                     </div>
  161.                     <div class="quinto_fila" align="center">
  162.                         <span class="campos_form_label">-</span>
  163.                     </div>
  164.                     <div class="sexto_fila" align="center">
  165.                         <span class="campos_form_label">-</span>
  166.                     </div>
  167.                     <div class="siete_fila" align="center">
  168.                         <span class="campos_form_label">-</span>
  169.                     </div>      
  170.                                 
  171.                     <!-- extras -->
  172.                     
  173.                     <!-- 1 -->
  174.                     <div class="quinto_fila" align="center">
  175.                         <span class="campos_form_label">-</span>
  176.                     </div>
  177.                     <!-- fecha -->
  178.                     <div class="fecha_fila" align="center">
  179.                         <span class="campos_form_label">-</span>
  180.                     </div>
  181.                     <!-- calif -->
  182.                     <div class="siete_fila" align="center">
  183.                         <span class="campos_form_label">-</span>
  184.                     </div>
  185.                     
  186.                     <!-- 2 -->                  
  187.                     <div class="quinto_fila" align="center">
  188.                         <span class="campos_form_label">-</span>
  189.                     </div>
  190.                     <!-- fecha -->
  191.                     <div class="fecha_fila" align="center">
  192.                         <span class="campos_form_label">-</span>
  193.                     </div>
  194.                     <!-- calif -->
  195.                     <div class="siete_fila" align="center">
  196.                         <span class="campos_form_label">-</span>
  197.                     </div>      
  198.                     
  199.                     <!-- 3 -->          
  200.                     <div class="quinto_fila" align="center">
  201.                         <span class="campos_form_label">-</span>
  202.                     </div>
  203.                     <!-- fecha -->
  204.                     <div class="fecha_fila" align="center">
  205.                         <span class="campos_form_label">-</span>
  206.                     </div>
  207.                     <!-- calif -->
  208.                     <div class="siete_fila_fin" align="center">
  209.                         <span class="campos_form_label">-</span>
  210.                     </div>                      
  211.                     <!-- fin extras -->
__________________
gerardo
Última edición por chalchis; 04/08/2011 a las 10:13
  #2 (permalink)  
Antiguo 05/08/2011, 01:35
 
Fecha de Ingreso: enero-2011
Ubicación: Madrid
Mensajes: 127
Antigüedad: 14 años
Puntos: 14
Respuesta: varias columnas de la mism altura
Prueba con la propiedad line-height y ponerles a todos los mismos valores. Por ej. line-height:20px;
__________________
Ayudas Accesibilidad

Faston
  #3 (permalink)  
Antiguo 05/08/2011, 08:29
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 21 años, 5 meses
Puntos: 21
Exclamación Respuesta: varias columnas de la mism altura
el problema es como las filas se van construyendo de manera dinamica que pasara si el texto de una de las columnas es mas grande esa propiedad en cada uno se acoplara a la altura

saludos y gracias por la nota
__________________
gerardo

Etiquetas: altura, columnas, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:49.