Question

如何在滚动条中水平显示图像？我试过但是我在滚动中垂直输出。请帮助我

try
{
  Object a;
  Object b;
  //100 lines of code
}
catch(ExeptionA& exa)
{
  cerr << "error a" << endl;
}
catch(ExeptionB& exa)
{
  cerr << "error B" << endl;
}
catch(...){
  cerr << "some other error" << endl;
}

Answer 1

为您的包装器定义width，将white-space设置为nowrap，最后将overflow-x设置为scroll。图像的容器不会超出指定的宽度，图像将全部显示在其中。一旦图像对于容器来说太大，它们就会被截断，并且你会在滑块下面找到一个滚动条。

.wrapper{
    width: 500px; 
    overflow-x:scroll;     
    white-space: nowrap;
}

小提琴：http://jsfiddle.net/a9zq2Ly2/

Answer 2

尝试从网上引用一些来源

http://www.websitecodetutorials.com/code/photo-galleries/css-horizontal-scroller.php

http://www.wickham43.net/imageswithascrollbar.php

Answer 3

试试这个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

如何在滚动条中水平显示图像？

3 个答案: