Home/ Questions/Q 8821439
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T05:51:19+00:00

How to make these imgs 2 rows, overflow the browser be seen with scroll

  • 0

How to make these imgs 2 rows, overflow the browser be seen with scroll right? not change to row 3.

http://jsfiddle.net/GW3rU/

    <div class="wp">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
        <img src="http://guitarcleaning.com/wp-content/uploads/2012/10/black_fender_stratocaster.jpg">
    </div>

​

CSS

.wp img{
    width:170px;
    height:170px;
}
.wp{
    height: 340px;/*make 2 row?*/
    width: 855px;/*5 column*/

    /*center horizontal*/
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    top:0;
    bottom: 0;
}

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Include overflow-x: scroll:

    .wp{
    height: 340px;/*make 2 row?*/
    width: 855px;/*5 column*/

    /*center horizontal*/
    position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    top:0;
    bottom: 0;
    overflow-x: scroll;
}

    EDIT

    Okay, now I get what you want. Your code was ok before. You’re trying to put 14 images in 2 rows of 5 images each. Is that right?

    You should either reduce your number of images to 10, increase the size of your .wp div to 7 images, or manually break the line at the middle of the list. The document will scroll, but the div won’t.

    • 0