I have a row of around 6 divs. Currently if the row of divs suppresses the width of the page, it puts the next div under the rest, like this
My question is: **how do I have a row of horizontal divs with a scroll bar like this **
Here's my code:
<div style="overflow:auto;">
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
</div>
<style>
.box {
float: left;
width: 127px;
margin: 9.2px;
border: 5px solid red;
}
</style>
JSFIDDLE: http://jsfiddle.net/ZrpHv/59/
You can wrap all <div class="box"> into one more div and add width in px
.box {
float: left;
width: 127px;
margin: 9.2px;
border: 5px solid red;
}
<div style="overflow:auto;">
<div style="width: 1000px;">
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
<div class="box">
<span>Example</span>
<br>
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" />
</div>
</div>
</div>
Please try this:
.parentdiv {
overflow-x: scroll;
width: 450px;
white-space: nowrap;
border: 1px solid black;
}
.box{
width: 127px;
margin: 9.2px;
border: 5px solid red;
display: inline-block;
}
Related
I want to create a grid styled layout without using grid or flexbox. I am assuming I need float for this. One of the issues is that the images aren't' filling the entire space. Any advice on how to do this?
.container {
max-width: 90%;
margin: 0 auto;
}
.grid-item {
width: 25%;
float: left;
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>
I suggest using the columns rule, specifying the number of columns and a width of 1/4 of the total width for responsiveness:
columns: 4 25vh;
Thus, the template with the image is now responsive without media queries.
.container {
max-width: 90%;
margin: 0 auto;
}
.grid {
columns: 4 25vh;
}
.grid-item {
/*width: 25%;
float: left;*/
}
.grid-item img {
object-fit: cover;
width: 100%;
height: auto;
}
<div class="container">
<div class="grid">
<div class="grid-item phone">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
<div class="grid-item camera">
<img src="https://picsum.photos/400/200" alt="" />
</div>
<div class="grid-item watch">
<img src="https://picsum.photos/500/300" alt="" />
</div>
</div>
</div>
Currently i'm using this script and i kinda like it
And here's how the HTML and CSS looks like.
<div id="slider">
<div class="viewer">
<div class="reel">
<div class="slide"> <img src="images/IMG9.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG8.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG7.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG6.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG5.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG4.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG3.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG2.jpg" width="900" height="500" alt="" /> </div>
<div class="slide"> <img src="images/IMG1.jpg" width="900" height="500" alt="" /> </div>
</div>
</div>
#slider
{
position: relative;
width: 900px;
margin: 0 auto;
}
#slider .viewer
{
width: 900px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}
#slider .viewer .reel
{
isplay: none;
height: 500px;
}
#slider .viewer .reel .slide
{
position: relative;
width: 900px;
height: 500px;
}
Only problem is that i like the faded version better. So is there any easy way to change that or do i have to switch js script completely?
I have a div with 20 items:
<div class="brand-illustrations">
<img src="modules/foundation/assets/images/pb_brand_icons_01_Shipping.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_02_Time_Savings.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_03_Increase.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_04_Decrease.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_05_Money.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_06_Money_Savings.svg">
<img src="modules/foundation/assets/images/pb_brand_icons_07_Accuracy.svg">
...etc...
</div>
And I made the enclosing div a flexbox:
.brand-illustrations {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
img {
display: block;
}
}
Which does as expected:
But I'd prefer to wrap to the next row after every 5th item. I know about n-th-child but am unsure the best way to use it with flex items.
You can't force flexbox to wrap as it has no grid function. At best you can fix the width of each flex-item to 20% with 'flex: 0 0 20%'..but I'd suggest wrapping each image in a div as they have unexpected results under flexbox.
Codepen Demo
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box {
flex: 0 0 20%;
text-align: center;
margin-bottom: 1em;
}
img {
max-width: 100%;
min-width: 0;
height: auto;
}
<div class="container">
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
<div class="box">
<img src="http://placekitten.com/100/100" alt="" />
</div>
</div>
I have a image gallery which is not straighting/fullfilling the full width in a row
html
<div class="col-md-6">
<figure class="gallery">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
</figure>
</div>
css
.gallery{
display:table;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
display:table-cell is also not working . There is 6 images here
.gallery{
display:table;
white-space: nowrap;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
<div class="col-md-6">
<figure class="gallery">
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
</figure>
</div>
From what I understood (since you have not mentioned the image size.)
.gallery{
}
.gallery > div{
padding:2px;
}
.gallery img{
background: transparent;
width:100%;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="gallery row">
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
</div>
</div>
Add Below css
.gallery{
display:table;
margin:0;
}
DEMO
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;
}