CSS horizontal scroll

前端 未结 4 1676
遇见更好的自我
遇见更好的自我 2020-11-29 03:30

I\'m trying to create a

with a series of photos which are horizontally scrollable only.

It should look something like this LINK;

H

相关标签:
4条回答
  • 2020-11-29 03:44

    check this link here i change display:inline-block http://cssdesk.com/gUGBH

    0 讨论(0)
  • 2020-11-29 03:55

    try using table structure, it's more back compatible. Check this outHorizontal Scrolling using Tables

    0 讨论(0)
  • 2020-11-29 04:05

    You can use display:inline-block with white-space:nowrap. Write like this:

    .scrolls {
        overflow-x: scroll;
        overflow-y: hidden;
        height: 80px;
        white-space:nowrap
    }
    .imageDiv img {
        box-shadow: 1px 1px 10px #999;
        margin: 2px;
        max-height: 50px;
        cursor: pointer;
        display:inline-block;
        *display:inline;/* For IE7*/
        *zoom:1;/* For IE7*/
        vertical-align:top;
     }
    

    Check this http://jsfiddle.net/YbrX3/

    0 讨论(0)
  • 2020-11-29 04:07

    Use this code to generate horizontal scrolling blocks contents. I got this from here http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html

    <html>
    <title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
    <head>
    <style type="text/css">
    #outer_wrapper {  
        overflow: scroll;  
        width:100%;
    }
    #outer_wrapper #inner_wrapper {
        width:6000px; /* If you have more elements, increase the width accordingly */
    }
    #outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
        width: 250px;
        height:300px;
        float: left;
        margin: 0 4px 0 0;
        border:1px grey solid;
    }
    </style>
    </head>
    <body>
    
    <div id="outer_wrapper">
        <div id="inner_wrapper">
            <div class="box">
                <!-- Add desired content here -->
                HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
            </div>
            <div class="box">
                 <!-- Add desired content here -->
                HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
            </div>
            <div class="box">
                <!-- Add desired content here -->
                HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
            </div>
            <div class="box">
                <!-- Add desired content here -->
                HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
            </div>
            <div class="box">
                 <!-- Add desired content here -->
                HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
            </div>
            <div class="box">
                <!-- Add desired content here -->
                HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
            </div>
            <!-- more boxes here -->
        </div>
    </div>
    </body>
    </html>
    
    0 讨论(0)
提交回复
热议问题