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