I need help with css and php:
- Create two columns (A and B; A is made up of only Strings, while B is made up of only Integers).
- Each element in each column counts as a content block (div).
- Align each content block with its counterpart in the neighboring column.
To make it easier to see with an example, I leave you the following image with the capital problem:
As you can see, there are two columns (A and B), and each column has one element. The elements of column A cannot invade the terrain of B no matter how long it is. If the content of a block (each red square is a div from column A) is too long, it will be put on the next line.
The problem is that the numeric contents (each green block is a div of column B) are not aligned with the text contents. As we see, there are 2 green blocks for 1 red block in the first case; because the red block is very big and takes up two lines . This causes the last red block to be left without its respective green block.
How can each red content be made to be aligned with its green counterpart?
I leave the CSS code that I am using:
.keywords {
width: 80%;
padding-right: 0.5rem;
float: left;
}
Along with the PHP code:
$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>';
}
Well, the answer built with the help of @quevedo and @BetaM is the following:
The answer is to use a
table
instead of adiv
. In case it was imperative to usediv
, it would be enough to use the layoutgrid
with CSS. But in this case, no CSS code was needed to separate the elements in an aligned way, since it is a table.This has been the result (the lines mark the alignment):