Put divs in HTML

Question

Put divs in HTML

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I am trying to make a gallery with the folders that I have in a directory, and for that I use php to browse them. The fact is that I am very bad, fatal, the design, and what I want to do is that each folder has 200px width and 200px high, and as they accumulate in a row, the next div goes down . I do not know if I explain myself very well. I leave the code:

<div style="display:flex; flex: wrap">
            <?php foreach($listaCarpetas as $proyectos):?>
                <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
                    <div style="width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
                        <?php echo $proyectos['file'];?>
                    </div>
                </a>
            <?php endforeach;?>
        </div>

I've tried it with display: flex; flex: wrap but nothing ... Thank you very much for your help in advance !!

html css div

asked by Csc99 18.08.2018 в 18:33

source

3 answers

0

link

You can see this example, maybe it can help you a lot

answered by 18.08.2018 в 18:42

0

I would recommend using a bootstrap, it has a built-in Grid system.

Then you make a div container, a row "row" and then you put the columns. The beauty of this is that it adapts to responsive.

First you must import in the head, bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Then the code for the columns

<main class="container">
    <div class="row">
            <?php foreach($listaCarpetas as $proyectos):?>
              <div class="col-md-2">
                <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
                    <div style="width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
                        <?php echo $proyectos['file'];?>
                    </div>
                </a>
              </div>
            <?php endforeach;?>

    </div>
</main>

You can learn bootstrap well from its official website link

answered by 18.08.2018 в 18:40

Sending of variable captured from a form .pyw with tkinter to an independent function in a .py How do I decompose a number in an array in c ++?

score 2 · Accepted Answer

As you are generating it, you see everything in a row because you have display: flex in the container:

<div style="display:flex; flex: wrap">
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
</div>

If you remove the display: flex and add a display: inline-block to the div , then you will get the effect you expect (that the div jump to the next line when no longer enter any more:

<div>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="display: inline-block; width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="display: inline-block;width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="display: inline-block;width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="display: inline-block;width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="display: inline-block;width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
  <a style="text-decoration: none; color: black;" href="mostrarProyecto.php?ruta=<?php echo $proyectos['file'];?>">
    <div style="display: inline-block;width: 200px; height: 200px; border-radius: 10%;text-align: center; margin: 20px; font-size: 40px;border: 2px solid black;">
    </div>
  </a>
</div>