1

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:

introducir la descripción de la imagen aquí

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>'; 

}
4
  • 1
    Y por qué no haces esto en una tabla o cuadrícula con grid?
    – BetaM
    el 30 ago. 2020 a las 20:17
  • 1. ¿Necesitas alineación superior o inferior? 2. Si es imperativo usar divs, ¿puedes usar un contenedor externo para cada línea? (para hacerte amable y fácil la vida). Si no es imperativo toma la pregunta de @BetaM como la solución que necesitas.
    – quevedo
    el 30 ago. 2020 a las 21:08
  • @quevedo lo hice con tablas y ha funcionado. Los contenidos de la columna A y B se han alineado, aunque en el centro. ¿Cómo puedo hacer para tener alineación superior? En la siguiente imagen se ve cómo está alineado al centro, y cómo debería estar alineado arriba (el 1 negro debería estar donde el 1 rojo): i.imgur.com/5I3zJXh.png
    – Toni521
    el 31 ago. 2020 a las 17:02
  • Usa el atributo 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> ]
    – quevedo
    el 31 ago. 2020 a las 17:29

1 respuesta 1

1

Bien, la respuesta construida con la ayuda de @quevedo y @BetaM es la siguiente:

$palabras_clave = array('brick' => 1000,
                    'block' => 100,
                    'brick of glass' => 2000,
                    'how to build a house with a lot of bricks' => 100,
                    'a really large text to see how it is match at the half' => 1);

asort($palabras_clave);


echo '<table>';

foreach ($palabras_clave as $x => $valor_de_x) {

    echo '<tr><td>' . $x . '</td><td>' . $valor_de_x . '</td></tr>';

}

echo '</table>';

La respuesta consiste en utilizar un table en lugar de un div. En caso de que fuera imperativo utilizar div, bastaría con utilizar el layout grid con CSS. Pero en este caso no ha hecho falta código alguno de CSS para separar los elementos de forma alineada, pues se trata de una tabla.

Este ha sido el resultado (las líneas marcan la alineación):

introducir la descripción de la imagen aquí

1
  • No olvides marcarla como aceptada. Saludos
    – BetaM
    el 31 ago. 2020 a las 21:58

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.