Question:
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 is out of alignment, to rise below the first image, aligning.
Note: Each 'figure' is a WordPress post, so there are no other divs to shape the mosaic.
Answer:
I suggest you work with grid in this case. With this CSS style it becomes easier to assemble mosaics and alignments as you want, for example.
In your CSS, I added grid
styles and aligned the elements as indicated in the question, treating some <figure>
individually (the 2nd, the 5th and the last, as 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">
<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 in the <head>
:
<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
And this CSS at the end of the style
or external .css
file:
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;
}