How to align a mosaic with CSS?

Question

How to align a mosaic with CSS?

Navigation

#1 by (2 votes)
#2 by (0 votes)

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"><figcaptionclass="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"><figcaptionclass="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"><figcaptionclass="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"><figcaptionclass="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="https://pbs.twimg.com/profile_images/758084549821730820/_HYHtD8F.jpg"><figcaptionclass="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"><figcaptionclass="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"><figcaptionclass="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
  <figure class="home-videos">
    <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"><figcaptionclass="videos-descript">
      <p>Titulo</p>
    </figcaption>
  </figure>
 </div>

I would like the "figure" that is out of alignment to go up below the first image, aligning.

Note: Each 'figure' is a Wordpress post, so it has no other divs to shape the mosaic.

html css

asked by anonymous 06.11.2017 / 18:33

2 answers

0

First possible solution

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

Probably I would try to use negative value to TOP by playing pro where I want the black square ...

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

Second possible solution

I would also risk dividing these groups of contents into 3 divs by applying a

width:33.3%;

; And shaping the way you want

THIRD AND MOST LIKELY SOLUTION

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

link

09.11.2017 / 18:17

How to return concrete classes, with filled navigation properties, through Linq queries? Put value in a text box (input)

score 2 · Accepted Answer

I suggest you work with grid in this case. With this style of CSS it becomes easier to build 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 (2nd, 5th, and last, because they have peculiar dimensions and / or placements):

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

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

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

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

Hack for MSIE 9+ and Edge:

Add this JS in <head> :

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

And this CSS at the end of style or .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;
}