How to align a mosaic with CSS?

Asked

Viewed 326 times

4

I have the following code:

.exemplo {
  width: 800px;
}
img {
  width:100%;
  height: 100%;
}
.home-videos {
   /*@extend .col-md-3;*/
   width: 200px;
   height: 150px;
   padding: 5px !important;
   box-sizing: border-box;
   margin: 0px;
   float:left;
}
.home-videos:nth-child(2), .home-videos:last-child{
   /*@extend .col-md-6;*/
    width: 400px;
    height: 300px;
 }
.home-videos:last-child{
    height: 150px;
 }
 .videos-descript {
    position: absolute;
    display: none;
 }
<div class="exemplo">
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
 </div>

I would like the "figure" that this out of alignment, rise down from the first image, aligning.

Note: Each 'figure' is a Wordpress post, so there are no other Ivs to shape the mosaic.

html css

2 answers

2


I suggest you work with grid in this case. With this style of CSS it becomes easier to mount mosaics and alignments as you want, for example.

In your CSS, I’ve added styles grid and aligned the elements as indicated in the question, treating some <figure> individually (second, fifth and last, because they have peculiar dimensions and/or positions):

.exemplo {
   width: 800px;
   display: grid;
   grid-template-columns: repeat(4, 1fr); 
   grid-gap: 0px; 
   background-color: #fff; 
   color: #444; 
}
img {
   width:100%;
   height: 100%;
}
.home-videos {
   /*@extend .col-md-3;*/
   width: 200px;
   height: 150px;
   padding: 5px !important;
   box-sizing: border-box;
   margin: 0px;
   float:left;
}
.home-videos:nth-child(2){
   /*@extend .col-md-6;*/
   width: 400px;
   height: 300px;
   
   grid-column: 2 / 3;
   grid-column-end:span 2;
   grid-row: 1 / 2;
   grid-row-end:span 2;
}

.home-videos:nth-child(5){
   grid-row-start: 2;
   grid-column: 1;
}

.home-videos:last-child{
   width: 400px;
   height: 150px;
   /*@extend .col-md-6;*/
   
   grid-column: 3 / 4;
   grid-column-end:span 2;
}
.videos-descript {
   position: absolute;
   display: none;
}
<div class="exemplo">
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>

  <figure class="home-videos">
    <img src="https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>

  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>

  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg">

    <figcaption class="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
 </div>

Hack for MSIE 9+ and Edge:

Add this JS to <head>:

<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>

And this CSS at the end of style or the archive .css external:

html[data-useragent*='rv:11.0'] .home-videos:nth-child(5),
html[data-useragent*='Edge'] .home-videos:nth-child(5),
html[data-useragent*='MSIE 10.0'] .home-videos:nth-child(5),
html[data-useragent*='MSIE 9.0'] .home-videos:nth-child(5){
  position: absolute;
  top: 158px;
  left: 8px;
}

  • Just one question, I had thought about using grid, but when I went to study, I read that it doesn’t work yet in all browsers, that’s right?

  • @Victorpereira only does not work in IE (Edge). In this case would have to make a hack. I will do here and put in the answer ok?

  • Okay, thank you very much, just one thing, the picture fulfilled 'last-Hild' she is in the middle, would have put at the end?

  • @Victorpereira I modified the code as your last comment, and made minor improvements to the code. I will see the hack and warning.

  • @Victorpereira I added at the end of reply a hack for IE.

0

First possible solution

Well, in the black square, I would probably abuse a little margin, if you’re dealing with float, or positions, if you’re dealing with position.

Probably I would try to use negative value to the TOP, playing to the site I want the black square...

Then, just give F12, or go resizing the screen and seeing which pixels (width) causes maybe the negative position of the object makes it rise further; In these pixels (bugs kkk), adjust with @media and get the result you want.

Second possible solution

I would also venture to divide these content groups into 3 Ivs, applying a 

width:33.3%;

; And shaping it the way you want it

THIRD AND MOST LIKELY SOLUTION

Would use the property COLUMN-COUNT available in css3, where you have the possibility to create the content organically; The video below shows right how that mounts the style in this way

https://www.youtube.com/watch?v=jqx_gANtNhg

Browser other questions tagged html css

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