Question

我一直在用下面的代码（在jsfiddle上）摆弄CSS大约6个多小时，现在试图在浏览器屏幕变小的同时让正确的按钮在页面上移动 - 它只是下拉无论我尝试什么，都待在那里。

那里有没有可以帮助摆脱我害虫的虫子吗？

谢谢！

JSFiddle的所有代码都编译在下面的单个文件中：

<html>
<body>
<script type="text/javascript">   
var timer1;
function scrollDiv(divId, depl) {
  var scroll_container = document.getElementById(divId);
  scroll_container.scrollLeft -= depl;
  timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 10);
}
</script>

<div style="float:left; width: 30px">
   <input type="button" value="«" style="height: 300px" onmousedown="scrollDiv('MyDiv', 3)" onmouseup="clearTimeout(timer1)" />
</div>
<div id="MyDiv" style="float: left; width: 95%; height: 300px; border: 1px solid; overflow: hidden">
    <div style="height: 300px; width: 1760px;">
    <img src="img1.jpg" style="height: 300px; display:inline-block;"/>
    <img src="img2.jpg" style="height: 300px; display:inline-block;"/>
    <img src="img3.jpg" style="height: 300px; display:inline-block;"/>
    <img src="img4.jpg" style="height: 300px; display:inline-block;"/>
    </div>
</div>
<div style="float:right; width: 30px">
   <input type="button" value="»" style="height: 300px; display:inline-block;" onmousedown="scrollDiv('MyDiv', -3)" onmouseup="clearTimeout(timer1)" />
</div>

<br style="clear:both" />


<!--<div style="float:left; width: 30px">
   <input type="button" value="«" style="height: 300px" onmousedown="scrollDiv('MyDiv2', 3)" onmouseup="clearTimeout(timer1)" />
</div>
<div id="MyDiv2" style="float: left; width: 960px; height: 300px; border: 1px solid; overflow: hidden">
    <div style="height: 300px; width:900px">
    <img src="img1.jpg" style="height: 300px; float: left;"/>
    <img src="img2.jpg" style="height: 300px; float: left;"/>
    <img src="img3.jpg" style="height: 300px; float: right;"/>
    <img src="img4.jpg" style="height: 300px; float: right;"/>
</div>
</div>
<div style="float:left; width: 30px">
   <input type="button" value="»" style="height: 300px" onmousedown="scrollDiv('MyDiv2', -3)" onmouseup="clearTimeout(timer1)" />
</div>-->
</body>
</html>

Answer 1

将div中包含父类的div包含在内，并给它以下样式：

.parent {position:relative; width:100%: overflow:hidden;float:left;}

Demo

<强>更新

从技术上讲，这可以满足您的需求。使用鲜为人知的vw视图宽度值。请注意，bowser支持可能是有限的，并且它有点繁琐。不仅如此，它在非常小的情况下打破了。 Media Queries可以为此提供帮助。

将MyDiv更改为：

<div id="MyDiv" style="float: left; width: 82vw; height: 300px; border: 1px solid; overflow: hidden">

和.parent：

.parent {
    position:relative;
    width:90vw;
    overflow:hidden;
    float:left;
}

Demo

Answer 2

<div style="float:left; width: 5%">
    <input type="button" value="«" style="height: 300px;width:100%;"/>
</div>

<div id="MyDiv" style="float: left; width: 89%; height: 300px; border: 1px solid; overflow: hidden;">
    <div style="height: 300px;width:20%;border:1px solid #ddd;float:left;"><img src="img1.jpg" style="width:100%;border:1px solid red;"/></div>
    <div style="height: 300px;width:20%;border:1px solid #ddd;float:left;"><img src="img1.jpg"  style="width:100%;border:1px solid red;"/></div>
    <div style="height: 300px;width:20%;border:1px solid #ddd;float:left;"><img src="img1.jpg"  style="width:100%;border:1px solid red;"/></div>
    <div style="height: 300px;width:20%;border:1px solid #ddd;float:left;"><img src="img1.jpg"  style="width:100%;border:1px solid red;"/></div>
</div>

<div style="float:left; width: 5%">
    <input type="button" value="»" style="height: 300px; width:100%;" />
</div>

Answer 3

我用一些css＆amp;更新了小提琴HTML更改。检查你是否想要这种方式。

[Fiddle link >][1]

注意： 因为您添加了4张图片我添加了css，仅设置了4张图片。你可以用css改变它。图像的高度是以父高度继承的。

Div滚动和按钮放置[CSS]

3 个答案: