0

Preciso de ajuda a concluir uma parte da minha PAP, talvez uma das partes mais importantes, álbum fotográfico, só que ando com um grande problema em relação a divisões, opá, ando á roda devolta do erro e nada. Eu tenho aqui um exemplo do meu código, mas o problema está explicito. Eu não consigo fazer com que a div exterior aumente ao adicionar outras divs dentro.

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
  /*Background color just for example*/
  background-color: yellow;
}

div.desc {
  padding: 15px;
  text-align: center;
  /*Background color just for example*/
  background-color: yellow;
}
<div style="color: #ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify">
  <h3 style="text-align:center;color: #ddd">ALBUM</h3>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

</div>

1

2 Respostas 2

1

Resolvido, basta adicionar float na div principal.

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
  /*Background color just for example*/
  background-color: yellow;
}

div.desc {
  padding: 15px;
  text-align: center;
  /*Background color just for example*/
  background-color: yellow;
}
<div style="color: #ddd;float:left;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify">
  <h3 style="text-align:center;color: #ddd">ALBUM</h3>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

</div>

0

Você pode resolver com o float: left;, como bem indicado pelo @MateusVeloso, ou, se não quiser/puder fazer desta forma, com um overflow: auto;.

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
  /*Background color just for example*/
  background-color: yellow;
}

div.desc {
  padding: 15px;
  text-align: center;
  /*Background color just for example*/
  background-color: yellow;
}
<div style="color: #ddd;overflow:auto;background-color:#282E34;text-align:center;padding:50px 80px;text-align: justify">
  <h3 style="text-align:center;color: #ddd">ALBUM</h3>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_fjords.jpg">
      <img src="img_fjords.jpg" alt="Fjords" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>

  <div class="gallery">
    <a target="_blank" href="img_forest.jpg">
      <img src="img_forest.jpg" alt="Forest" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .