Question

滚动到屏幕上的最后一张浮动图像

大家好

这只是一个简单的图像列表，浮出屏幕。

图像浮出屏幕，因为我已设置容器的宽度以允许它们浮动。

如果我滚动查看图像，它会滚动过去的最后一张图像到木板空间。

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

    <!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>

Answer 1

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

那就行了

Answer 2

请尝试以下代码：

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

这会将滚动添加到div而不是窗口。

希望这会对你有所帮助。

Answer 3

这是你的整个HTML，有一些修复。我刚刚在CSS中添加了一个'img'因为我目前没有任何图像...但是我建议你设置你的图像因为如果图像尺寸不同，这样可以防止样式看起来很邋in 。它可以拉伸图像......但是你可以单独调整它们的大小。无论如何，这只是一个提案......这是你的页面。此外，你没有开头。确保你添加它。

<!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>

编辑：删除“overflow：auto;”在你的“.wrap”中。然后滚动条将成为Web浏览器的滚动条。

Answer 4

您可以使用jquery：

DEMO

有类似的东西：

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

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

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

通过使用foreach和$(this).width()添加每个图像宽度来获取总图像宽度，不要忘记为每个图像添加边距，并通过将新宽度设置为{{1 }}

使用纯css可能有更简单的方法，但我尝试的一切都没有用......

希望我帮助你

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

4 个答案: