Necesito ayuda con css y php:
- Crear dos columnas (A y B; A está compuesto solo de Strings, mientras que B solo está compuesto de Integers).
- Cada elemento de cada columna cuente como un bloque de contenido (div).
- Alinear cada bloque de contenido con su homólogo de la columna vecina.
Para que se vea mejor con un ejemplo, les dejo la siguiente imagen con el problema capital:
Como se puede ver, hay dos columnas (A y B), y cada columna tiene un elemento. Los elementos de la columna A no pueden invadir el terreno de B por muy largo que sea. Si el contenido de un bloque (cada cuadrado rojo es un div de la columna A) es muy largo, se pondrá en la siguiente línea.
El problema es que los contenidos numéricos (cada bloque verde es un div de la columna B) no están alineados con los contenidos de texto. Como vemos, hay 2 bloques verdes para 1 bloque rojo en el primer caso; porque el bloque rojo es muy grande y acapara dos líneas. Esto provoca que el último bloque rojo se quede sin su respectivo bloque verde.
¿Cómo se puede hacer para que cada contenido rojo esté alineado con su homólogo verde?
Dejo el código CSS que estoy utilizando:
.keywords {
width: 80%;
padding-right: 0.5rem;
float: left;
}
Junto con el código PHP:
$palabras_clave = array('brick' => 1000,
'block' => 100,
'brick of glass' => 2000,
'how to build a house with a lot of bricks' => 100,
'asdddddddddddddddddddddddd ads a da das asd ad hhhhhhhhhhhhhhhhhhhhhhhh' => 1);
asort($palabras_clave);
foreach ($palabras_clave as $x => $x_value) {
echo '<div class="keywords">' . $x . '</div>' . '<div>' . $x_value . '</div>';
}
vertical-align
para las celdas así asignas una clase a la tabla:<table class="miclase">...</table>
y fijas el atributo para las celdas que estén en una tabla de la clase miclase así:.miclase td { vertical-align: top; }
Las opciones para ese atributo son:[ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> | <longitud> ]