This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 7 years ago.
I'm trying to build a simple image grid in CSS that shows images in 4 columns with no gaps under them and dynamic floating positions.
CSS:
.img-grid .img-grid-item-holder {
display: inline-block;
text-align: left;
width: 25%;
overflow: hidden;
padding: 0px;
margin: 0px;
}
.img-grid img {
width: 100% !important;
height: auto !important;
}
HTML:
<div class="img-grid">
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/400/800/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/350/750/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/500/600/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/410/430/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/320/650/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/350/750/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/500/600/cats" />
</div>
</div>
Here is a JSfiddle showing the HTML and CSS I currently have. You can see there are spaces between the bottom right images.
I need it to look like this (or similar), and to allow the elements to sit neatly close to each other when I append new elements to img-grid div, while making sure the old elements keep their positions.
I tried to do this using CSS3 columns, but they don't play well with dynamically appending elements to the img-grid div making the old images change positions.
Thanks in advance.
It's a type of Masonry layout.
I just made it with http://masonry.desandro.com/
Check out the solution here
https://jsfiddle.net/41efz7ye/22/
$(document).ready(function(){
$('.img-grid').masonry({
// options
itemSelector: '.img-grid-item-holder',
columnWidth: 150
});
});
.img-grid .img-grid-item-holder {
width: 150px;
display: inline-block;
padding: 0px;
margin: 0px;
}
.img-grid img {
width: 100% !important;
height: auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
</script>
<div class="img-grid">
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/400/800/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/350/750/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/500/600/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/410/430/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/320/650/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/350/750/cats" />
</div>
<div class="img-grid-item-holder">
<img src="http://www.lorempixel.com/500/600/cats" />
</div>
</div>
Related
here is my code, I need to display a page with 3 images one is on the left and other two on the right side but all images are displaying in the same line, they are not displaying in order that I
List item
have given. please help me in solving these.
.leftAlign {
float: left;
}
.rightAlign {
float: right;
margin: 10px;
}
.rightOrder{
float: right;
margin: 10px;
}
.primary-button {
background-color: #109bd5;
color: white;
}
<div class="about-content">
<h4 mat-dialog-title>Hello World</h4>
<div mat-dialog-content>
<div class='leftAlign'>
<h4>IMAGE1</h4>
<img src="assets/images/image1.png">
</div>
<div class='rightAlign'>
<h4>IMAGE2</h4>
<img src="assets/images/image2.png">
</div>
<div class='rightOrder'>
<h4>ICON</h4>
<img src="assets/images/icon_img.png">
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-button mat-dialog-close class="mat-button primary-button">close
</button>
</div>
</div>
<div style="display:flex;justify-content:space-between;">
<div>
<!-- This will be left aligned -->
<img src="https://via.placeholder.com/150?text=1" alt="image 1">
</div>
<div>
<!-- This will be right aligned -->
<div>
<img src="https://via.placeholder.com/150?text=2" alt="image 2">
</div>
<div>
<img src="https://via.placeholder.com/150?text=3" alt="image 3">
</div>
</div>
</div>
Please have look at this, if you are using Bootstrap, I will recommend using it instead of giving inline style.
I have 5 images and I want them to float left and stay on one line without images being moved to the next line, I also want a border right of 100% I have successfully done this with display: flex, however flex does't work properly in IE 11
Here is my HTML
<div class="col-md-12 award-logos">
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
<div class="wrapper">
<img src="https://www.hsjaa.com/images/joomlart/demo/default.jpg" />
</div>
</div>
And the CSS
.award-logos { border: 1px solid #ccc; }
.award-logos .wrapper {padding: 10px 30px;margin:5px 0;text-align:center;border-right:1px dotted #000; float: left;}
.wrapper img {max-height:150px; padding;}
https://jsfiddle.net/5sw538t7/
I want the first image to stick to the top of the container and the following images should be below it... top:0; lets the image be..200px above the container and if I just say position:relative its always in the middle...;
<div class="container">
<div class="card_left">
<p style="font-size:1.6em; padding: 15px 0;"><b>Title</b></p>
<p style="font-size:1.2em;">Long text</p>
</div>
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/>
<img src="../res/images/artikel1bild.PNG"/>
</div>
Use display: block so there will be no other images in the same line and margin: auto for centering the image
img {
display: block;
margin: auto;
width: 200px;
}
<div>
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
<img src="https://www.w3schools.com/css/paris.jpg" />
</div>
Just add <br /> after each image if you want to stick to HTML:
<div class="card_right">
<img src="../res/images/artikel1bild.PNG"/><br />
<img src="../res/images/artikel1bild.PNG"/><br />
</div>
Or the better way would be to make a separate CSS file and set display: block; for your img tags:
img {
display: block;
}
Example: https://jsfiddle.net/nk8fbr76/
try this
img {
margin: 0, auto;width: 200px;display:inline-block;height:100px;
}
<div class="card_right">
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
<img src="https://www.w3schools.com/css/img_fjords.jpg"/>
</div>
I have this on my page. i wanted the container divs to align at the center. so i gave display:inline-block. but it didn't work. why is this happening? is there a way to display the containers as inline-block elements so that they appear exactly at the center?
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
<div id="container">
<div id="definition">
<p>Nothing</p>
</div>
<div id="image">
<img src="img1.jpg" />
</div>
</div>
css
#container {
vertical-align:top;
}
#image {
height:30%;
width:30%;
position: absolute;
overflow: hidden;
}
#definition {
width: 30%;
height: 30%;
position: absolute;
background-color: red;
}
Using display: table and display: table-cell this code will centre the divs on the page: Fiddle. Hopefully this is the effect you want.
So I have html layout as this one:
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" />
<div class="summary">Short summary</div>
How to display it as:
<img src="image.jpg" /> <h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with floats however it displayed as:
<h1>Title</h1>
<img src="image.jpg" /> <div class="info">Extra info</div>
<div class="summary">Short summary</div>
I tried with positions (relative and absolute) and I got what I wanted, unfortunately it doesn't work very well in IE and if the short summary text is very short then image hides behind the other elements. I don't know image height (dynamic height), so height: xxx px; doesn't fit here.
Any help would be great.
EDIT:
I can't div wrap all (right side) elements in this case.
To get it done without adding additional divs to your code, add the below CSS
img{float:left}
div{display:table-row}
DEMO 2
Use position:absolute
<h1>Title</h1>
<div class="info">Extra info</div>
<img src="image.jpg" width="40" />
<div class="summary">Short summary</div>
CSS
img{float:left; top:0; position:absolute; left:0}
div, h1{display:block; margin-left:40px /*Add image width value as margin-left*/ }
DEMO 3
<img src="image.jpg" class="left-image" />
<div class="right-col">
<h1>Title</h1>
<div class="info">Extra info</div>
<div class="summary">Short summary</div>
</div>
CSS
.left-image {
float: left;
}
.right-col {
margin-left: <width-of-image> px;
}
how about this: http://jsfiddle.net/xpq2m/
CSS
body {
padding-left: 100px;
}
img#s {
position: absolute;
top: 0;
left: 0;
}