分享程序员开发的那些事...
更新时间：2023-09-26 13:43:16
我无法找到一种方法来做到这一点只是HTML + CSS，所以我倾向于JQuery。这实际上完美地工作，它也很好地降解 - 如果没有JavaScript，图像仍然可滚动，它们只是不会流入右边距（默认情况下'.pic-container'div没有宽度，直到js添加（））。
pre $ //更新pic容器宽度
函数picWidth（）{
win = （文档）$ .WIDTH（）;
width = String（Math.round（（（win-960）/ 2）+ 960））;
$（'。pic-container'）。css（{'width'：width}）;
}
$（window）.resize（picWidth）;
picWidth（）;
I have a page with a body that's 960px wide and I have a row of images that I want to overflow out of the right side of the page, and allow for the display of the overflowed images and horizontally scrolling. I don't want the page as a whole to horizontally scroll, just that element.
It's relatively easy to get the horizontal scrolling to work, but I can't get the overflow images to show without also increasing the width of the entire page (and, hence, making the page horizontally scroll).
My CSS:
container{
width:960px;
margin: 0 auto;
}
.pic-container {
white-space:nowrap;
overflow:scroll;
}
My (simplified) HTML:
<body>
<container>
<div class="pic-container">
<div class="pic-row">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
<img src="5.jpg">
<img src="6.jpg">
</div>
</div>
</container>
</body>
Here's a little diagram of what I'm looking for:
I couldn't figure out a way to do this with just html + css so I leaned on JQuery. This actually works perfectly, and it degrades nicely too — if there's no javascript, the images are still scrollable, they just don't bleed into the right margin (the '.pic-container' div by default has no width until the js adds it in).
// Update pic-container width
function picWidth() {
win = $(document).width();
width = String( Math.round(((win-960)/2) + 960) );
$('.pic-container').css({'width' : width});
}
$(window).resize(picWidth);
picWidth();