Guys I have a for that every turn will show a video. I want the videos to be aligned 3 X 3 on the page. How can I do this?

Asked

Viewed 27 times

-2

Imagem

I want to align the videos that the loop will display as follows, but without using Bootstrap:

[] [] []

[] [] []

[] [] []

If it were just Frontend I could do this alignment with CSS(FLEX-BOX) good, but I nn know how to do this for. Someone saves me pf.

css3 django

  • "If it were only Frontend I could make that alignment" But this is just CSS, what can’t you do? make a CSS that puts it in flex or inline-block and the correct sizes, no matter what it is or how many elements they have they will stay aligned

  • Remember to always send the code, not code prints, this helps the community to bugger the code, although as Ricardo says, ai is just CSS. put an external div on for, that div with flex display, 100% width and Justify-content space-between that will already help..

1 answer

1

Puts a parent container outside the loop of section class="mp4" and put in the Service {width: calc(100% / 3)} for example. The parent container would be in flex.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.pai {
  display: flex;
  flex-wrap: wrap;
}

.mp4 {
  width: calc(100% / 3);
  box-sizing: border-box;

  border: 1px solid #000;
}
<!-- container pai por fora do elemento do loop -->
<div class="pai">

  <!-- elemento do loop -->
  <section class="mp4">1</section>
  <!-- fim do loop -->

  <section class="mp4">2</section>
  <section class="mp4">3</section>
  <section class="mp4">4</section>
</div>

Browser other questions tagged css3 django

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