I can’t get the "column" Divs to stand next to each other

Asked

Viewed 32 times

0

It was supposed to be 3 columns next to each other

         <div class="container"> 
                <div class="containerint">
                    <p>Confira nosso trabalho</p>
                    <div class="linha">
                       <div class="coluna">
                           <img src="./assets/images/Fotos site/9010.jpg">
                           <img src="./assets/images/Fotos site/DSC_0176.jpg">
                           <img src="./assets/images/Fotos site/DSC_3113.jpg">
                       </div>
                    </div>
                    <div class="linha">
                       <div class="coluna">
                          <img src="./assets/images/Fotos site/2408  20x25.jpg">
                          <img src="./assets/images/Fotos site/6601.jpg"> 
                          <img src="./assets/images/Fotos site/DSC_0582.jpg">
                       </div>
                    </div>
                    <div class="linha">
                       <div class="coluna">
                           <img src="./assets/images/Fotos site/DSC_8184.jpg">
                           <img src="./assets/images/Fotos site/476.jpg">
                           <img src="./assets/images/Fotos site/DSC_1686.jpg">
                       </div>
                    </div>
                </div>
            </div>


 .containerint {
    width: 1100px;
    max-width: 100%;
    
    margin: auto;
    color: black;
}

.linha {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}
.coluna {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}


.coluna img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

@media screen and (max-width: 200px) {
    .coluna {
        flex:100%;
        max-width: 100%;
    }
}

Turns out they stay in one column.

html css

1 answer

1

Your CSS is right your HTML is what’s wrong, see that you separated each column individually within a Row, but in fact you had to have 3 columns inside the row there without you will have 3 columns next to each other!

inserir a descrição da imagem aqui

.containerint {
  width: 1100px;
  max-width: 100%;
  margin: auto;
  color: black;
}

.linha {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.coluna {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}


.coluna img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 200px) {
  .coluna {
    flex: 100%;
    max-width: 100%;
  }
}
<div class="container">
  <div class="containerint">
    <p>Confira nosso trabalho</p>
    <div class="linha">
      <div class="coluna">
        <img src="./assets/images/Fotos site/9010.jpg">
        <img src="./assets/images/Fotos site/DSC_0176.jpg">
        <img src="./assets/images/Fotos site/DSC_3113.jpg">
      </div>
      <div class="coluna">
        <img src="./assets/images/Fotos site/2408  20x25.jpg">
        <img src="./assets/images/Fotos site/6601.jpg">
        <img src="./assets/images/Fotos site/DSC_0582.jpg">
      </div>
      <div class="coluna">
        <img src="./assets/images/Fotos site/2408  20x25.jpg">
        <img src="./assets/images/Fotos site/6601.jpg">
        <img src="./assets/images/Fotos site/DSC_0582.jpg">
      </div>
    </div>
    <div class="linha">
      <div class="coluna">
        <img src="./assets/images/Fotos site/2408  20x25.jpg">
        <img src="./assets/images/Fotos site/6601.jpg">
        <img src="./assets/images/Fotos site/DSC_0582.jpg">
      </div>
    </div>
    <div class="linha">
      <div class="coluna">
        <img src="./assets/images/Fotos site/DSC_8184.jpg">
        <img src="./assets/images/Fotos site/476.jpg">
        <img src="./assets/images/Fotos site/DSC_1686.jpg">
      </div>
    </div>
  </div>
</div>

  • Thanks for the help. Hug!

  • @gabrielpertile se resolver remember to mark the answer as accepted by clicking the below of the arrows next to the answer, so it is not open even if the problem has already been solved ;)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.