0

滚动到屏幕外的最后一个浮动图像

大家好

我在这里有一个演示 - http://www.ttmt.org.uk

它只是一个漂浮在屏幕外的图像的简单列表。

图像漂浮在屏幕外，因为我设置了容器的宽度以允许它们漂浮。

如果我滚动查看图像，它会滚动到最后一张图像，只剩下木板空间。

如何设置容器的宽度以允许图像浮动但在最后一个图像处停止滚动。

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <!--css-->
      <link rel="stylesheet" href="css/master.css" />

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        ul{
          width:100%;
        }
        li{
          list-style:none;
          float:left;
          margin:0 10px 0 0;
        }
        .wrap{
          padding:20px;
          overflow:auto;
          width:5000px;
          background:#eee;
        }
      </style>


      <title>Title of the document</title>
      </head>

    <body>

      <div class="wrap">
        <ul>
          <li><img src="01.jpg" /></li>
          <li><img src="02.jpg" /></li>
          <li><img src="03.jpg" /></li>
          <li><img src="04.jpg" /></li>
          <li><img src="05.jpg" /></li>
        </ul>  
      </div>  

    </body>

    </html>
4

4 回答 4

0 
.wrap {width:auto; white-space: nowrap;}
li {float:none; display:inline-block}

That'll do it

于 2013-09-26T12:07:17.777 回答
0

Try the below code :

.wrap {
    background: none repeat scroll 0 0 #EEEEEE;
    height: 510px;
    margin: 0 auto;
    overflow: auto;
    padding: 20px;
    width: 1000px;
}
ul {
    width: 3500px;
}

this will add the scroll to the div not to the window.

hope this will help you.

于 2013-09-26T12:07:32.763 回答
0

这是您的整个 html 并进行了一些修复。我刚刚在 css 中添加了一个“img”，因为我目前没有任何图像......但我建议也设置你的，因为如果图像大小不同，这将防止样式看起来很邋遢. 它可能会拉伸图像......但随后您会分别调整它们的大小。无论如何，这只是一个建议......这是你的页面。另外，你没有头开口。确保添加它。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <link rel="stylesheet" href="css/master.css" />
        <style type="text/css">
            body {
                margin:auto;
            }
            ul {
                width:100%;
            }
            li {
                list-style:none;
                float:none;
                margin:0 10px 0 0;
                display: inline-block;
            }
            .wrap {
                padding:20px;
                width:auto;
                background:#eee;
                white-space: nowrap;
            }
            img {
                position: relative;
                float: left;
                border: 1px solid black;
                width: 500px;
                height: 100px;
            }
        </style>
        <title>
            Title of the document
        </title>
    </head>
    <body>
      <div class="wrap">
        <ul>
          <li><img src="01.jpg" /></li>
          <li><img src="02.jpg" /></li>
          <li><img src="03.jpg" /></li>
          <li><img src="04.jpg" /></li>
          <li><img src="05.jpg" /></li>
        </ul>  
      </div>  
    </body>
</html>

编辑：删除“溢出：自动；” 在你的“.wrap”中。然后滚动条将成为 Web 浏览器的滚动条。

于 2013-09-26T12:17:06.943 回答
0

你可以用 jquery 做到这一点：

演示

有类似的东西：

var margin = 10; //constant
var totalWidth = 0;

$('.wrap img').each(function() {
  totalWidth = totalWidth + $(this).width() + margin;
});

$('.wrap').width(totalWidth);

foreach只需通过使用和添加每个图像宽度来获得总图像宽度$(this).width()，不要忘记为每个图像添加边距，然后通过将新宽度设置为wrap.

使用纯 css 可能有更简单的方法来做到这一点，但我尝试的一切都没有奏效......

希望我帮助了你

于 2013-09-26T12:37:06.527 回答