So I have multiple divs with images and another group of divs with p tags (only numbers) that make up an odontogram (a set of teeth with their corresponding numbers) inside a column which its length is 8 and then it is inside a boostrap card. Each image contains a div
Here is all the code https://codepen.io/luzsdx/pen/ExKqwXP
and here is a sample
<div class="row ">
<div class="col-md-8 odontograma">
<div class="card">
<div class="card-body">
<br>
<div class="pieceRow1">
<p class="pieza18" id="pieza18">18</p>
<p class="pieza17" id="pieza17">17</p>
<p class="pieza16" id="pieza16">16</p>
<p class="pieza15" id="pieza15">15</p>
<p class="pieza14" id="pieza14">14</p>
<p class="pieza13" id="pieza13">13</p>
<p class="pieza12" id="pieza12">12</p>
<p class="pieza11" id="pieza11">11</p>
<p class="pieza21" id="pieza21">21</p>
<p class="pieza22" id="pieza22">22</p>
<p class="pieza23" id="pieza23">23</p>
<p class="pieza24" id="pieza24">24</p>
<p class="pieza25" id="pieza25">25</p>
<p class="pieza26" id="pieza26">26</p>
<p class="pieza27" id="pieza27">27</p>
<p class="pieza28" id="pieza28">28</p>
</div>
<div class="fila1 d-flex justify-content-center">
<div class="pieza18" id="img18"><img class="diente18" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza17" id="img017"><img class="diente17" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza16" id="img17"><img class="diente16" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza15" id="img15"><img class="diente15" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza14" id="img14"><img class="diente14" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza13" id="img13"><img class="diente13" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza12" id="img12"><img class="diente12" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza11" id="img11"><img class="diente11" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3 ml-3"></div>
<div class="pieza21" id="img21"><img class="diente21" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza22" id="img22"><img class="diente22" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza23" id="img23"><img class="diente23" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza24" id="img24"><img class="diente24" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza25" id="img25"><img class="diente25" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza26" id="img26"><img class="diente26" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza27" id="img27"><img class="diente27" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
<div class="mr-3"></div>
<div class="pieza28" id="img28"><img class="diente28" src="../../imagenes/caraDentalVacia.png" alt="">
</div>
</div>
</div>
</div>
</div>
I tried to put the class 'img-fluid' in the img but it makes them small and it doesn't make them responsive.
Is there a way to make number-image responsive inside the column with bootstrap or css?
Well if you really want an Ontogramm done with HTML and CSS, instead of using a graphic/image then a grid could do that. This grid, however, will require a min-width of 720px to be displayed correctly. Below that, you're having issues solely based on the size. It should adapt to the screen size and expand to its full width by its own.
body {
min-width: 720px;
display: grid;
grid-template-columns: repeat(17, 1fr);
grid-auto-rows: auto;
grid-gap: 2px;
padding: 2px;
text-align: center;
}
div {
width: 100%;
height: auto;
padding: 0;
margin: 0;
object-fit: contain;
}
<body>
<!-- 1st Row -->
<div>18</div>
<div>17</div>
<div>16</div>
<div>15</div>
<div>14</div>
<div>13</div>
<div>12</div>
<div>11</div>
<div></div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<!-- 2nd Row -->
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<!-- 3rd Row -->
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<!-- 4th Row -->
<div>48</div>
<div>47</div>
<div>46</div>
<div>45</div>
<div>44</div>
<div>43</div>
<div>42</div>
<div>41</div>
<div></div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
<div>36</div>
<div>37</div>
<div>38</div>
<!-- 5th Row -->
<div></div>
<div></div>
<div></div>
<div>55</div>
<div>54</div>
<div>53</div>
<div>52</div>
<div>51</div>
<div></div>
<div>61</div>
<div>62</div>
<div>63</div>
<div>64</div>
<div>65</div>
<div></div>
<div></div>
<div></div>
<!-- 6th Row -->
<div></div>
<div></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div></div>
<div></div>
<!-- 7th Row -->
<div></div>
<div></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div><img src="https://www.tacoshy.de/Images/teeth.png"></div>
<div></div>
<div></div>
<div></div>
<!-- 8th Row -->
<div></div>
<div></div>
<div></div>
<div>85</div>
<div>84</div>
<div>83</div>
<div>82</div>
<div>81</div>
<div></div>
<div>71</div>
<div>72</div>
<div>73</div>
<div>74</div>
<div>75</div>
<div></div>
<div></div>
<div></div>
</body>
Related
When adding the bootstrap class "img-fluid" to my images they don't appear, when inspecting the element it sets the image at 0x0 pixels.
The html:
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid"
alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="assets/images/placeholder.png" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
The images are supposed to be the same size as the parent(div.col) and be responsive to the parent.
Here's an answer based on my comment.
Because you have a .col element as a child of a flex parent, the flex-basis is set to 0. That basically equates to width: 0.
To get around that, set the flex-basis to auto on the .col that are children of the .row element.
.row>.col {
flex-basis: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col">
<div class="row no-gutters">
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="w-100"></div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
<div class="col">
<img src="https://placehold.it/100x100" class="img-fluid" alt="placeholder">
</div>
</div>
</div>
I'm not a web developer, so please forgive me if this question is off-base.
I'm trying to build out a part of my flask app that serves up an album/card style page like this.
So, ideally I would like be able to display any number of cards on the page, wrapping the content so that no more than 3 or 4 cards are displayed per row.
I thought using flex-box might help in this situation, and this is what I have tried so far:
<div class="box" style="display:flex; max-width: 500px;">
{% for row in x %}
<div class="card mb-4 box-shadow" style="padding:5px; min-width: 200px; margin: 10px;">
<div class="card-body">
<h5>{{row.title}}</h5>
<p class="card-text" style="font-size: 15px;">{{row.text}}</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<form action="filtersearch" name="filtersearch" method="POST" style="width: 80%;">
<input id="namesearch" name="nameval" style="width: 80%;" placeholder={ {current_name}}>
</form>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
{% endfor %}
But unfortunately, this just displays them horizontally into the infinity of the margins.
I've used Flask to display dynamic content with HTML tables before, but is it possible to do something like this?
Thanks for your help!
you can use flex-flow: row wrap and to center the elements use justify-content: center I added margin:10px around but you can choose to change that and make the justify-content: space-around or justify-content: space-between. another way to do this layout is to use display: grid you can read more about it here:
A Complete Guide to Grid
or
A Complete Guide to Flexbox
Check this code:
section {
max-width: 160px;
height: auto;
border: 1px solid #a2a2a2;
text-align: center;
margin: 10px;
}
img {
width: 100%;
}
.parent--products {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
<div class="parent--products">
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://picsum.photos/5416/3611?image=1082">
</div>
<div class="product-info">
<h5>Winter Jacket</h5>
<h6>$99.99</h6>
</div>
</div>
</section>
</div>
Actually the image is 450*450pixels (both height and width is 15.88cm)
so i want to adjust them in equally to screen please see my screen shot and as you see the name also came in the bottom of each image the name should not so much big and small too it just fit with the image
img {
padding float: left;
border-radius: 150%;
}
<h1>ACTOR</h1>
<img src="img/chadwick.jpg" alt="chadwick" height="15%" width="15%">
<img src="img/michael.jpg" alt="michel" height="15%" width="15%">
<img src="img/lupita.jpg" alt="lupita" height="15%" width="15%">
Bootstrap 3 solution
HTML structure
<div class="row">
<div class="col-...">
<img ...>
<h5>...</h5>
</div>
</div>
Added padding-left and padding-right to each column to make space. Added margin-top to <h5> (Could be something else).
Example
.my-row>div {
padding: 0 7vw;
}
.my-row h5 {
margin-top: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row my-row">
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 1</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 2</h5>
</div>
<div class="col-xs-4 text-center">
<img src="http://placehold.it/450x450" alt="" class="img-responsive img-circle">
<h5>Name 3</h5>
</div>
</div>
Bootstrap 4 solution
<div class="row text-center">
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="chadwick"></div>
<div>chadwick</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="michel"></div>
<div>michel</div>
</div>
<div class="col">
<div><img src="https://via.placeholder.com/450x450" alt="lupita"></div>
<div>lupita</div>
</div>
</div>
I was making a layout to create an image grid using Zurb Foundation 6.4.3 XY Grid's Card Component. All my images are actually 320x180 px in dimension. But when I am running the following Code images are getting stretched.
I am new in CSS3 Flexbox and Foundation XY Grid and not being able to find out what is happening here. I will be grateful if someone help me to find out a solution.
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="grid-container">
<div class="grid-x medium-up-3">
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
</div>
</div>
Add align-self to your img (the stretching happens as the align-items property is stretch by default in the flex direction). You can also add align-items: center to your card.
If so needed, you can throw in a width: 100% too for the img (for the image to scale evenly) - see demo below:
.card img {
align-self: center;
}
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css' />
<div class="grid-container">
<div class="grid-x medium-up-3">
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
</div>
</div>
A foundation based solution would be to use:
Use grid-x and align-center for the grid wrapper.
Use the following markup for cell:
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
See demo below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css">
<div class="grid-container">
<div class="grid-x align-center">
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
</div>
</div>
How to display image horizontally in scroll bar? I tried but i am getting output vertically in scroll.Please help me
<div style="width: 1000px; height: 500px; overflow-x:scroll; padding: 5px; display:inline-block; float:left;" >
<div id="slider4" class="text-center">
<div class="slide-img">
<img src="img/team/team1.png">
<p style="font-weight: bold;">B Madhuprasad</p>
<p>Chairman,</p>
<p>Non-Executive</p>
</div>
<div class="slide-img">
<img src="img/team/team2.png">
<p style="font-weight: bold;">Vineet Suchanti</p>
<p>Managing </p>
<p>Director</p>
</div>
<div class="slide-img">
<img src="img/team/team3.png">
<p style="font-weight: bold;">Uday Patil</p>
<p>Director,</p>
<p>ECM</p>
</div>
<div class="slide-img">
<img src="img/team/team4.png">
<p style="font-weight: bold;">Rakesh Choudhari</p>
<p>Managing Director, </p>
<p>Stock Broking</p>
</div>
<div class="slide-img">
<img src="img/team/team5.png">
<p style="font-weight: bold;">Radha Kirthivasan</p>
<p>Senior Vice President,</p>
<p>EDM</p>
</div>
<div class="slide-img">
<img src="img/team/team6.png">
<p style="font-weight: bold;">Nipun Lodha</p>
<p>Head,</p>
<p>Investment Banking</p>
</div>
<div class="slide-img">
<img src="img/team/team07.png">
<p style="font-weight: bold;">Nilesh Dhruv</p>
<p>Head,</p>
<p>Equity Dealing</p>
</div>
<div class="slide-img">
<img src="img/team/team08.png">
<p style="font-weight: bold;">Jayraj Nair</p>
<p>Head, </p>
<p>Depositories</p>
</div>
<div class="slide-img">
<img src="img/team/team09.png">
<p style="font-weight: bold;">Ankur Mestry</p>
<p>Head, <br/>Mutual Funds & <br/>IPO Distribution</p>
</div>
<div class="slide-img">
<img src="img/team/team10.png">
<p style="font-weight: bold;">Cherian MJ</p>
<p>Vice President, </p>
<p>Keynote ESOP</p>
</div>
</div>
</div>
</div>
Define a width to your wrapper, set the white-space to nowrap and finally overflow-x to scroll. The container of the images won't grow beyond the specified width, and the images will all be displayed inside of it. Once the images are too big for the container, they will be cutoff and you get a scrollbar below the slider.
.wrapper{
width: 500px;
overflow-x:scroll;
white-space: nowrap;
}
Fiddle : http://jsfiddle.net/a9zq2Ly2/
try to refer some sources from web
http://www.websitecodetutorials.com/code/photo-galleries/css-horizontal-scroller.php
http://www.wickham43.net/imageswithascrollbar.php
Try this html:
<div class="wrapper">
<div id="slider4" class="text-center">
<div class="slide-img">
<p>1</p>
</div>
<div class="slide-img">
<p>2</p>
</div>
<div class="slide-img">
<p>3</p>
</div>
<div class="slide-img">
<p>4</p>
</div>
<div class="slide-img">
<p>5</p>
</div>
<div class="slide-img">
<p>6</p>
</div>
<div class="slide-img">
<p>7</p>
</div>
<div class="slide-img">
<p>8</p>
</div>
<div class="slide-img">
<p>9</p>
</div>
<div class="slide-img">
<p>10</p>
</div>
<div class="slide-img">
<p>11</p>
</div>
<div class="slide-img">
<p>12</p>
</div>
<div class="slide-img">
<p>13</p>
</div>
<div class="slide-img">
<p>14</p>
</div>
<div class="slide-img">
<p>15</p>
</div>
</div>
</div>
css:
.wrapper{
width: 1000px;
height: 500px;
}
#slider4{
white-space: nowrap;
}
.slide-img{
background: #ccc;
height: 200px;
display: inline-block;
width: 100px;
}
JSFiddle demo