How to place images next to each other in columns?

Asked

Viewed 945 times

-1

I want to leave the images right next to each other with the same size of margins and columns etc. How do I?

inserir a descrição da imagem aqui

.w3grayscale {
  margin-bottom: 120px;
  width: 200px;
  margin: 10px;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  display: flex;
}
<div class="w3grayscale">
  <div class="w3-half">
    <img src="recepcao1.jpg" style="width:100%">
    <img src="sala1.jpg" style="width:100%">
    <img src="sala2.jpg" style="width:100%">
    <img src="sala3.jpg" style="width:100%">
    <img src="sala4.jpg" style="width:100%">
    <img src="sala1.webp" style="width:100%">

  </div>

  <div class="w3-half">
    <img src="recepcao2.jpg" style="width:00%">
    <img src="sala4.jpg" style="width:100%">
    <img src="sala5.jpg" style="width:100%">
    <img src="sala1.jpg" style="width:100%">
    <img src="sala2.jpg" style="width:100%">
    <img src="sala3.jpg" style="width:100%">
  </div>

  <!-- End Page Content -->
</div>

html css image

  • Have you noticed that the first image of the second div is not showing up, and this is misaligning the image of the second column? That’s your problem right there??

2 answers

0


I made an example with the same amount of images that you placed:

<style>
    .w3grayscale {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-flow: row nowrap;
        width: 100vw;
    }
    .allContent{
        width: 100%;
        text-align: center;
        justify-content: center;

    }
    img{
        display: inline-block;
        width: 25%;
        height: 50%;
    }
</style>

<div class="w3grayscale">
    <div class="allContent">
        <div class="w3-half">
            <img src="exemple.png">
            <img src="exemple.png">
            <img src="exemple.png" >
            <img src="exemple.png" >
            <img src="exemple.png" >
            <img src="exemple.png" >

        </div>

        <div class="w3-half">
            <img src="exemple.png" >
            <img src="exemple.png" >
            <img src="exemple.png" >
            <img src="exemple.png" >
            <img src="exemple.png" >
            <img src="exemple.png" >
        </div>
    </div>
  <!-- End Page Content -->
</div>

Como ficou:

In this case, I added a div to your HTML, so there is a noticeably nice spacing, in addition to the use of Justify-content: space-Around. Images are 25% width to fit according to the flow.

0

Caique, are you okay? You can use the align-items: flex-end to say that you want to align your two "div W3-half" at the end of "div w3grayscale"

Follow the example: 

.w3grayscale {
  margin-bottom: 120px;
  width: 200px;
  margin: 10px;
  position: relative;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  align-items: flex-end;
}


.w3-half{ width:50%; margin-left: 5px;}

If you still have questions, please tell me so I can help you!

Browser other questions tagged html css image

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