I wanna align my six div objects, which are basicly boxes, into three rows.
(picture i draw to demonstrate >
I'm really clueless how i should align my boxes, so that they come ento these rows.
Right now, it's just one long horizontal line.
I'll post my code here :)
HTML:
<div class="boxbox">
<div id="newsb">
<img class="bottom" src="news/newsbutton.png" />
<img class="topi" src="news/news2.png" />
</div>
<div id="billetb">
<img class="bottom" src="news/billetbutton.png" />
<img class="topi" src="news/billetbutton2.png" />
</div>
<div id="infob">
<img class="bottom" src="news/infobutton.png" />
<img src="news/infobutton2.png" width="250" height="150" class="topi" />
</div>
<div id="kontak">
<img class="bottom" src="news/kontakt.png" />
<img class="topi" src="news/kontakt2.png" />
</div>
<div id="log">
<img class="bottom" src="news/loginbutton.png" />
<img class="topi" src="news/login2.png" />
</div>
<div id="cf4a">
<img class="bottomi" src="news/sponsor/KS.png" />
<img class="topi" src="news/sponsor/SS.png" />
<img class="bottomi" src="news/sponsor/ES.png" />
<img class="topi" src="news/sponsor/CM.png" />
</div>
</div>
CSS:
This is basicly just hover over animations, it'll be way to long to post here. Please write if you will need my CSS.
Any help would be greatly appreciated!
According to the picture, here's the code:
Live demo
HTML
<div class="boxbox">
<div class="row">
<div id="newsb">
<img class="bottom" src="news/newsbutton.png" />
<img class="topi" src="news/news2.png" />
</div>
<div id="billetb">
<img class="bottom" src="news/billetbutton.png" />
<img class="topi" src="news/billetbutton2.png" />
</div>
<div id="infob">
<img class="bottom" src="news/infobutton.png" />
<img src="news/infobutton2.png" width="250" height="150" class="topi" />
</div>
</div>
<div class="row">
<div id="kontak">
<img class="bottom" src="news/kontakt.png" />
<img class="topi" src="news/kontakt2.png" />
</div>
<div id="log">
<img class="bottom" src="news/loginbutton.png" />
<img class="topi" src="news/login2.png" />
</div>
<div id="cf4a">
<img class="bottomi" src="news/sponsor/KS.png" />
<img class="topi" src="news/sponsor/SS.png" />
<img class="bottomi" src="news/sponsor/ES.png" />
<img class="topi" src="news/sponsor/CM.png" />
</div>
</div>
</div>
CSS
.row{
display:block;
}
.row div{
display:inline;
}
You can see this here:
HTML:
<div class="boxbox">
<div id="newsb">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="billetb">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="infob">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="kontak">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="log">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
<div id="cf4a">
<img class="left" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
<img class="right" src="http://a.deviantart.net/avatars/v/a/varezart.jpg?1" />
</div>
CSS:
.boxbox {
height:200px;
margin:10px;
}
.boxbox > div {
width:32%;
height:100px;
background-color:Black;
display:inline-block;
margin:1px;
}
* {
margin:0;
padding:0;
}
.left {
float:left;
}
.right {
float:right;
}
img {
margin-top: 12px;
}
You cansee this here: http://jsfiddle.net/78UEX/1/
Hope this helps!!!
Try this demo ..
You can let each div take its place by it-self, and if the horizontal row has no place for another div, it will go to another row under the first row ..
<style>
.boxbox{
position: relative;
}
.box{
float: left;
width: 33.3%;
}
</style>
<div class="boxbox">
<div id="newsb" class="box">
<img class="bottom" src="news/newsbutton.png" />
<img class="topi" src="news/news2.png" />
</div>
<div id="billetb" class="box">
<img class="bottom" src="news/billetbutton.png" />
<img class="topi" src="news/billetbutton2.png" />
</div>
<div id="infob" class="box">
<img class="bottom" src="news/infobutton.png" />
<img src="news/infobutton2.png" />
</div>
<div id="kontak" class="box">
<img class="bottom" src="news/kontakt.png" />
<img class="topi" src="news/kontakt2.png" />
</div>
<div id="log" class="box">
<img class="bottom" src="news/loginbutton.png" />
<img class="topi" src="news/login2.png" />
</div>
<div id="cf4a" class="box">
<img class="bottomi" src="news/sponsor/KS.png" />
<img class="topi" src="news/sponsor/SS.png" />
<img class="bottomi" src="news/sponsor/ES.png" />
<img class="topi" src="news/sponsor/CM.png" />
</div>
</div>
Another way
demo
or you can set three vertical rows and put two divs in each row ..
<style>
.boxbox{
position: relative;
overflow: hidden;
}
.row{
float: left;
width: 33.3%;
}
</style>
<div class="boxbox">
<div class="row">
<div id="newsb">
<img class="bottom" src="news/newsbutton.png" />
<img class="topi" src="news/news2.png" />
</div>
<div id="billetb">
<img class="bottom" src="news/billetbutton.png" />
<img class="topi" src="news/billetbutton2.png" />
</div>
</div>
<div class="row">
<div id="infob">
<img class="bottom" src="news/infobutton.png" />
<img src="news/infobutton2.png" />
</div>
<div id="kontak">
<img class="bottom" src="news/kontakt.png" />
<img class="topi" src="news/kontakt2.png" />
</div>
</div>
<div class="row">
<div id="log">
<img class="bottom" src="news/loginbutton.png" />
<img class="topi" src="news/login2.png" />
</div>
<div id="cf4a">
<img class="bottomi" src="news/sponsor/KS.png" />
<img class="topi" src="news/sponsor/SS.png" />
<img class="bottomi" src="news/sponsor/ES.png" />
<img class="topi" src="news/sponsor/CM.png" />
</div>
</div>
</div>
According to your picture, you want 2 Rows of 3 Columns. Rows go left/right and Columns go up/down.
There are many different ways to do this.
Here's an example: http://jsfiddle.net/qB55N/
<div class='row'>
<div class='col'>1</div>
<div class='col'>2</div>
<div class='col'>3</div>
</div>
<div class='row'>
<div class='col'>4</div>
<div class='col'>5</div>
<div class='col'>6</div>
</div>
Is this what you are talking about? Example: http://jsfiddle.net/xsZ54/
HTML
<div class="row">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
CSS:
.row{
display: table;
width: 100%;
}
.box{
display: table-cell;
}
Related
I'm trying to fit dynamically added items into a flex div of a certain height. For example my container div is 100% width and 25vh height and I have 50 images loading inside of it within their child containers. I want these containers to resize accordingly and to fit inside that div, staying inside of it, 6-7 child divs per row. So far when I use flex-grow:15% value and they get moved to a new row, they don't resize at all and overlap outside, moving of the div. Is there any way to make it work?
Here is what I do:
<div class="brand-container">
<div class="tier-top-1">
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
<div class="tier-item">
<img src="cat.jpg" />
</div>
</div>
</div>
And CSS:
.brand-container {
width: 100%;
height: 100vh;
}
.tier-top-1 {
width: 100%;
height: 25vh;
background: white;
display: flex;
justify-content: space-around;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.tier-item {
margin: 1rem;
justify-self: center;
text-align: center;
flex: 1 1 15%;
}
.tier-top-1 img {
max-height: 20vh;
}
With the amount of margin plus the height of images coming into play, to have only 6 or 7 images per row, you need to be able to run a calculation using JavaScript to set the max-height of each image as 25vh minus the space between rows, that difference divided by the number of rows.
I adjusted the flex value to be 0 0 13vw and adjusted the margin to just be margin-top for the images. You may have to calculate this number for various scenarios as well.
See the snippet below. Click on Full Page to see the solution. Otherwise, the vh units will be calculated from the height of your browser, not the height of the snippet window.
const imgs = document.querySelectorAll(".tier-top-1 img");
const numImgs = imgs.length;
const rows = Math.ceil(numImgs / 7);
const maxHeight = (25 - rows - 1) / rows;
imgs.forEach(img=> img.style.maxHeight = maxHeight + "vh");
.brand-container {
box-sizing: border-box;
width: 100%;
height: 100vh;
}
.tier-top-1 {
box-sizing: border-box;
width: 100%;
height: 25vh;
background: white;
display: flex;
justify-content: space-around;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: 1px solid black;
}
.tier-item {
box-sizing: border-box;
margin: 0;
padding: 0;
margin-top: .5vh;
align-self: center;
text-align: center;
flex: 0 0 13vw;
}
.tier-top-1 img {
max-height: 13vw;
}
<div class="brand-container">
<div class="tier-top-1">
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
<div class="tier-item">
<img src="https://via.placeholder.com/400x400/?text=Image" />
</div>
</div>
</div>
I have a Razor page that displays a collection of thumbnail images in a vertical stack:
#foreach (var photo in Model)
{
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="#photo.LargeSquareThumbnailUrl" alt="Many cups!" />
</div>
}
However, what I have been trying to do is stack the images horizontally on one row. And if it overflows (which it nearly always will do) then to display with a horizontal scroll bar.
I guess I would handle the overflow in CSS, but I am unable to work out how to stack the images in the first place. Can anyone help?
I would use a container with white-space:nowrap and put each pod as inline block:
.container {
white-space: nowrap;
overflow: auto;
max-width: 100%;
}
.wrapper {
display: inline-block;
white-space: normal;
}
<div class="container">
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
<div class="wrapper">
<div>#photo.PhotoId</div>
<div>#photo.Title</div>
<div>
<img src="http://via.placeholder.com/150x150" alt="Many cups!" />
</div>
</div>
</div>
I have a container-fluid that contains 3 row
Row 1: 4 images
Row 2: 4 images
Row 3: 3 images
I am trying to center Row 3, I tried adding Row 3 inside another class called "container" and tried the "left, right" in css but did not work, may you please help?
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>
Is this your solution
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
.center .img-responsive{
margin:0 auto;
display:block;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
The last row have 9, need to be 12, replace 3 by 4.
<div class="row">
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
And change the css by this:
.img-responsive {
padding-bottom: 10px;
display:block;
margin-left: auto;
margin-right: auto
}
you can use bootstrap class text-center
or you can just add this css
.center{
text-align: center;
}
.b3 {
padding-bottom: 20px;
}
.client-section {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-responsive {
padding-bottom: 10px;
}
#clients {padding-top:10px;padding-bottom:50px;color: #7e7e7e; background-color:#151515;}
.center{
text-align: center;
}
<section class="container-fluid client-section" id="clients">
<div class="row">
<div>
<b class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1 b2 b3">Clients</b>
</div>
</div>
<div class="col-lg-10
col-md-10
col-sm-10
col-xs-10
col-lg-push-1
col-md-push-1
col-sm-push-1
col-xs-push-1">
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-4">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-2">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
<div class="row center">
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
<div class="col-lg-3">
<img class="img-responsive" src="imgs/UserImage.png" width="200" height="200" />
</div>
</div>
</div>
</section>
I have a 3x3 block of images.
I want the images to be 400px wide and 300px in height.
I also want the images to stretch from edge to edge of the screen and for there to be no space between the images.
This is what it looks like at the moment
This is my current CSS and HTML:
.clear {
clear: both;
}
#grid {
width: 100%;
}
.grid-element {
width: 33.3333%;
height: 200px;
float: left;
}
<div id="grid">
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
</div>
<div class="clear">Example taken from grandoch's gist</div>
E. Updated the answer for use with Bootstrap.
Bootstrap adds left and right padding for all col-*-* elements, so you will merely need to remove that padding.
For full viewport width, you will need to use a fluid container, i.e. the container-fluid class.
#grid .grid-element {
height: 200px;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
}
img {
width: 100%;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="grid" class="row">
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
<div class="col-xs-4 grid-element">
<img src="http://static.caloriecount.about.com/images/medium/colby-cheese-157898.jpg" />
</div>
</div>
</div>
I want to align my images like bootstrap, I can't do it with bootstrap because user have the option to resize the images and using Bootstrap class "col-md, col-xs, etc." user can't resize the image width, I tried creating a div with width:100% and then I add width:25% to each image (I want 4 images per row), and the image is in the correct size but not in the correct position.
This is what I have at the moment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<h2>Without Bootstrap</h2>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
</div>
Here is an example of what I want vs what I have
Code
Thanks in advance.
If you add a class to your divs that contain the images, you can use:
display: inline-block;
I added CSS to your file:
.blockRow {
display: inline-block;
padding-right: 2.2em;
}
and HTML:
<div class="container">
<h2>With Bootstrap</h2>
<div class="row">
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="col-sm-3 col-md-3 col-xs-3">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
<hr />
<h2>Without Bootstrap</h2>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
<div class="blockRow">
<img class="responsive" src="https://www.webkit.org/blog-files/acid3-100.png" style="width:250px; height:250px;" />
</div>
</div>
You'll have to play around with the padding to get it how you want it to look: http://codepen.io/anon/pen/pEobEg