I have got a bootstrap grid with dynamically generated images.
If the last element is alone in the row it should be centered.
And if there are two elements in row, the second element should float right.
This is what I want:
Two elements in row:
A B D
E F G
H I
One element in row:
A B D
E F G
H
HTML Code:
<div class="row">
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
<div class="col-md-4">
<img src="img.jpg" />
</div>
</div>
This is what I get:
Two elements in row:
A B D
E F G
H I
One element in row:
A B D
E F G
H
I tried it with :last-child:nth-child(odd) and :last-child:nth-child(even), but in the first row the first element is odd, in the second row the first element is even, in the third row the first element is odd again and so on.
Notice that the content size variates.
You can use a mixture of nth-child and last-child:
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.col-md-6 {
width: 33.3333%;
height: 100px;
border: 1px solid black;
box-sizing: border-box;
}
.col-md-6:last-child:nth-child(3n+2) {
/* push second child to right if last child */
margin-left: auto;
border-color: red;
}
.col-md-6:last-child:nth-child(3n+1) {
/* push first child to middle if last child */
margin: auto;
border-color: red;
}
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-6">
3
</div>
<div class="col-md-6">
4
</div>
<div class="col-md-6">
5
</div>
<div class="col-md-6">
6
</div>
<div class="col-md-6">
7
</div>
<div class="col-md-6">
8
</div>
</div><br>
<div class="row">
<div class="col-md-6">
1
</div>
<div class="col-md-6">
2
</div>
<div class="col-md-6">
3
</div>
<div class="col-md-6">
4
</div>
<div class="col-md-6">
5
</div>
<div class="col-md-6">
6
</div>
<div class="col-md-6">
7
</div>
</div>
If you need this to work with bootstrap 3, rather than 4, then you can just use
.col-md-4:last-child:nth-child(3n+2),
.col-md-4:last-child:nth-child(3n+1){
/* push second child to right if last child */
margin-left: 33.333333%;
border: 1px solid red;
}
Example bootply
You can do it using flex.
var numberOfFlexItmes = $('.flex').children('div').length;
if((numberOfFlexItmes%2) == 0){
$('.flex').css('justify-content','space-between');
}
else{
$('.flex').css('justify-content','space-around');
}
.flex{
width: 300px;
flex:1;
display: flex;
flex-wrap: wrap;
}
.flex-item{
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='flex'>
<div class='flex-item'>
A
</div>
<div class='flex-item'>
B
</div>
<div class='flex-item'>
C
</div>
<div class='flex-item'>
D
</div>
<div class='flex-item'>
E
</div>
<div class='flex-item'>
F
</div>
<div class='flex-item'>
G
</div>
<div class='flex-item'>
H
</div>
</div>
What you can do, is work out if it's got a remaining 2 or 1 when dynamically generating it and use the col-x-push-x to push it that many columns
Fiddle with two Remaining Image
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4 col-md-push-4">
<img src="https://via.placeholder.com/50x50" />
</div>
</div>
</div>
Fiddle with One Remaining Image
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4">
<img src="https://via.placeholder.com/50x50" />
</div>
<div class="col-md-4 col-md-push-4">
<img src="https://via.placeholder.com/50x50" />
</div>
</div>
</div>
You could approach the layout you want using flexbox.
Add justify-content: center to the row. This will center an item if it is in a row by itself.
Also target the second last item in a row. Set margin-right to auto. In a row with only two items, this will align the last item to the right.
Example:
body {
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
width: 33.3333%;
}
.col:nth-last-child(2) {
margin-right: auto;
}
img {
width: 100%;
height: auto;
display: block;
}
<div class="row">
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
</div>
<br><br>
<div class="row">
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
<div class="col">
<img src="https://unsplash.it/200x200" />
</div>
</div>
Related
So, i'm working on Image Gallery with Bootstrap...
Problem is i can't make four images two on top, three under the top ones and on the left corner vertical image. You can see in the image i have four images placed okay but vertical one is under them...
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
<img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
<img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
</div>
</div>
What should i try? here is the image
You may imbricate class and elements ;
possible example
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<img src="http://dummyimage.com/300x600" class="col-4">
<div class="row wrap col-8">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x330" class="mb-auto col-6">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
<img src="http://dummyimage.com/300x450" class="mt-auto col-4">
</div>
</div>
</div>
Here is a suggestion
.col {
margin: 5px;
height: 200px;
}
.col-4 {
margin: 5px 0px;
}
.col-4,
.col {
background-image: url(https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-3.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-8">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col-4"></div>
</div>
page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
position: relative;
}
page[size="A4"] {
width:21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility:hidden;
}
page[size="A4"] > * {
visibility:visible;
}
}
<page size="A4">
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>
As you can see in the second row there is right side image and left part is empty. I want all images in the row. But the following condition is applied.
Height and width of the images are dynamic.
How much image will contain in the single row is also dynamic.
The width of the page is static.
How can I remove empty white space and resolve this issue?
Use flex box. And Set the display to flex with flex-wrap:wrap.
page {
background: #fff;
display: flex; // updated this
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
position: relative;
flex-wrap: wrap;
}
page[size="A4"] {
width:21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility:hidden;
}
page[size="A4"] > * {
visibility:visible;
}
}
<page size="A4">
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div style="float: left;"> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>
You can use Flexbox here. Apply display: flex to page[size="A4"] element.
And also remove float: left inline style. No need here.
page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
position: relative;
}
page[size="A4"] {
width: 21cm;
min-height: 29.7cm;
display: flex;
flex-wrap: wrap;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility: hidden;
}
page[size="A4"]>* {
visibility: visible;
}
}
<page size="A4">
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png"> </div>
<div> <img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png"> </div>
</page>
I reworked your example to work with Bootstrap v4.
I used row class to create a row and col-md-3 class to allow 4 images per row.
Bootstrap only supports up to 12 columns in a row. E.g 4 images = 12
/ 4 which gives you col-*-3
Then I gave .col-md-3 img properties: width: 100%, height: 100%
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<page size="A4">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
</div>
<div class="col-md-3">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
</div>
</div>
</div>
</page>
CSS
page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
position: relative;
}
page[size="A4"] {
width: 21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility: hidden;
}
page[size="A4"]>* {
visibility: visible;
}
}
.col-md-3 img {
height: 100%;
width: 100%;
}
Here's JSFiddle: https://jsfiddle.net/ezcrtn22/2/
Giving all your divs a fixed height, solves the problem (this height should be the maximum of all the images). Even better would be a resizing of the images towards a fixed height, this prevents the images from being cut of.
Actually I don't see any need for divs around the images you could simply omit them.
page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
position: relative;
}
page[size="A4"] {
width:21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
#media print {
body {
visibility:hidden;
}
page[size="A4"] > * {
visibility:visible;
}
}
page img {
height: 170px;
float: left;
}
<page size="A4">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/11_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/13_english.png">
<img src="https://www.vsss.co.in/Admin/uploads/710451/13_gujarati.png">
</page>
I have an image that is supposed to appear on a website page. It works in Firefox, but does not appear in either Safari or Chrome for some reason. This is the line I have used for the image in the JS file:
$("#picture").append("<img src='/images/sub1/Green_graph.png' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")
I can't seem to figure out why it appears in one browser but not the others and have not yet found an answer to this problem.
Edit: this is the code from the HTML file:
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<img id="picture">
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
You are appending an img to an img. I'm surprised that worked at all.
Either change the parent tag:
<span id="picture"></span>
$(document).ready(function(){
$("#picture").append("<img src='https://www.fillmurray.com/300/250' alt='Low_graph' style='width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative'>")});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<span id="picture"></span>
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
Or set the attributes on the existing tag.
$(document).ready(function(){
$("#picture").attr("src", "https://www.fillmurray.com/300/250");
$("#picture").attr("alt", "Bill is awesome");
//Style should really come from a stylesheet, but I'll leave it for now
$("#picture").attr("style", "width:300px;height:250px;padding: 0px 0px 20px 40px;position:relative");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<div id="info">
<h3 id="rank"><span style = "color:orange"> random:</span></h3>
<div class="col-6">
<img id="picture">
</div>
<div class="col-6">
<h4 id="blockquoteField"></h4>
</div>
<div id="density"></div>
</div>
</div>
</div>
</div>
<div class = "col-md-4">
<img src = "/images/sub1/decrease_form_result_background.png" alt = "right picture" style = "height: 580px; width: 780px">
</div>
<div class="col-md-1">
</div>
</div>
I need the following Layout:
+-----------+-----------+
| | |
| Div A | |
| | |
| | |
+-----------+ Div C |
| | |
| Div B | |
| | |
| | |
+-----------+-----------+
The boxes should be responsive and contain images (one for each box).
I am using bootstrap 3 and found a possible solution, unfortunately the heights depend also on the image size. I can't use tables and the layout has to be responsive, so a fixed height is no solution. I searched trough stackoverflow but I could not find a solution.
One approach is this (which is working well in the fiddle, except the images:
var colHeight = $(".slider").height();
var colHeight2 = colHeight - 30;
$('.child').css('min-height', colHeight2 / 2);
.slider {
background: #555;
}
.image1 {
margin-bottom: 30px;
background: #555;
}
.image2 {
background: #555;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 slider">
<img src="http://placehold.it/700x600" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<div class="col-xs-6 col-sm-12 image1 child">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-12 image2 child" style="overflow: hidden;">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
And I`ve created a fiddle here:
JsFiddle
You could check display:flex. I would do the below:
<div class="outer-container">
<div class="inner-container item">
<div>
<img src="" style="height:300px"/>
</div>
<div>
<img src="" style="height:200px"/>
</div>
</div>
<div class="item">
<img src="" />
</div>
</div>
.outer-container {
width: 50%;
margin: 0 auto;
}
.outer-container, .inner-container {
display: flex;
}
.inner-container {
flex-direction: column;
}
div {
border: 1px solid;
}
try this code in your jsfiddle
<div class="container">
<div class="col-xs-6 col-sm-6 col-md-6" >
<div class="col-md-8">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
<div class="col-md-5">
<img src="http://placehold.it/400x300" class="img-responsive">
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6" >
<img src="http://placehold.it/700x600" class="img-responsive">
</div>
</div>
You could assign
display:flex;
To all the child div's in the row class.
example here http://codepen.io/tom-maton/pen/Ywdzeo
<div class="row">
<div class="col-sm-6">
<div class="row">
<img src="http://placehold.it/400x300" class="img-responsive"/>
</div>
<div class="row">
<img src="http://placehold.it/400x300" class="img-responsive"/>
</div>
</div>
<div class="col-sm-6">
<img src="http://placehold.it/400x300" style="height:600px" />
</div>
</div>
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.