How to make the external div adjust itself to the sizing of the internal div?

0

I have two div´s the first is <div class="galeria-de-fotos"> and the second is <div class="img-galeria"> . The first one adjusts automatically according to the size of the second, if the second one is without the float: left; property, it looks like this:

WhenIusefloat:left;inthesecond<divclass="img-galeria"> to organize my images the result is this:

Organized images, however, the first <div class="galeria-de-fotos"> is not readjusted to involve the second <div class="img-galeria">

HTML

<divclass="galeria-de-fotos">
<h2>GALERIA DE FOTOS</h2>
<form enctype="multipart/form-data" action="upload.php?cliente=<?php echo $idcli; ?>" method="POST">
Enviar esse arquivo: <input class="inselecionar" name="userfile" accept="image/png, image/jpeg" type="file">
<input class="inenviar" type="submit" value="Enviar arquivo">
</form>
<?php
$painelfotos=mysqli_query($con,"select foto from fotos where idcod = '$idcli'");
while($painelfotoslistar=mysqli_fetch_array($painelfotos)){
?>

<div class="img-galeria">
    <img src="./fotos/<?php echo $painelfotoslistar['foto']; ?>">
</div>

CSS

div.galeria-de-fotos{
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: auto;
    background-color: #ccc;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
}

div.galeria-de-fotos h2{
    width: 100%;
    max-width: 700px;
    height: auto;
    background-color: #ccc;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}

div.galeria-de-fotos form{
    width: 100%;
    font-size: 20px;
    padding: 10px;
    box-sizing: border-box;
}

input.inselecionar{
    width: 100%;
    font-size: 20px;
    background-color: #ccc;
    margin-bottom: 10px;
    padding: 5px;
    box-sizing: border-box;
    border: 0px;
}

input.inenviar{
    width: 100%;
    font-size: 20px;
    background-color: #0E69A9;
    margin-bottom: 10px;
    padding: 5px;
    box-sizing: border-box;
    border: 0px;
    color: #fff;
}

input.inenviar:hover{
    background-color: #6AA2CA;
}

div.img-galeria img{

    width: 100%;
    max-width: 210px;
    background-color: #000;
    padding: 5px;
    box-sizing: border-box;
}
    
asked by anonymous 25.07.2017 / 12:48

1 answer

0

Have you ever tried using a jQuery plugin to make galleries? Search a little about the Gamma Gallery which has a very good result. You have a very good article explaining the tool. Here's a Example / Demo of how it would look.

    
26.07.2017 / 21:52