Place secondary Ivs next to each other inside the main

Asked

Viewed 74 times

0

Well it is as follows, I have the following code, what I intend to put the Divs that are inside the div with id="Goncalo" next to each other in the form of a straight line, that is, I want it to be aligned in the form of a "straight line".

<div id="goncalo">
<div class="preview-wrapper" style="background-image: url('1.png'); background-repeat: no-repeat; width:50px; height:100px; background-size:100%;" data-id="24294275">
</div>
<div class="preview-wrapper" style="background-image: url('2.png'); background-repeat: no-repeat; width:100px; height:100px; background-size:100%;">
</div>


            </div>
html css

  • But you have to equalize the height of the two images ?

  • Exactly. All the same next to each other.

  • Add the following line in CSS: #Goncalo > div { float:left;}

  • It doesn’t work! I’ve tried

1 answer

1


Hello. Currently this CSS positioning thing is quite easy.

.goncalo {
   width: 100%; //o tamanho que quiseres
   text-align: justify;
   display: flex;
   justify-content: space-between;
 }
.preview-wrapper {
   width: 100px;
   .
   .
   .
}

And so on! I noticed you have different widths for the . preview-wrapper!

Well, the point here is to use the FLEXBOXES

Hug and good work.

  • The Divs are aligned in the same line, but are really far from each other, I’ll leave below a print.

  • http://prnt.sc/e20ul1

  • I get it, it was 100% there is some way to calculate automatically according to the size of the images? of the Divs placed?

  • Does the size of the images vary? Then use auto for the width of . preview-wrapper... But it would be easier if you showed the layout than you want. From the image you’ve put it’s hard for me to at least guide you.

  • I already got what I wanted, but I had to put the width of the div Goncalo to 0.

Browser other questions tagged html css

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