61,129
社区成员
发帖
与我相关
我的任务
分享200分!多个div并列在一起.200分!
如下代码:
内层宽度超过了外层,但是我要内层都并列在一起显示,并且页面加个按钮,点击它时,内层可以水平移动以达到能浏览完整的目的.
在线等候. 谢谢!
<div style="float:left;width:250px">
<div style="float:left;width:100px">多层并列</div>
<div style="float:left;width:100px">多层并列</div>
<div style="float:left;width:100px">多层并列</div>
<div>
<input type=button id=btn1 value=" < " onclick="moveLeft();" >
<input type=button id=btn2 value=" > " onclick="moveRight();" >
内层宽度超过了外层,但是我要内层都并列在一起显示,并且页面加个按钮,点击它时,内层可以水平移动以达到能浏览完整的目的.
在线等候. 谢谢!
...全文
请发表友善的回复…
发表回复
Aaron0011 2009-04-02
- 打赏
- 举报
ding..
wangjunwei1985 2009-04-02
- 打赏
- 举报
看不懂 厉害
avonqin 2009-04-02
- 打赏
- 举报
ok
结帖
结帖
avonqin 2009-04-02
- 打赏
- 举报
怎么会丢失一层了呢?
avonqin 2009-04-02
- 打赏
- 举报
多谢! 佩服!
tommingcong123 2009-04-02
- 打赏
- 举报
先顶下~
cirfye 2009-04-02
- 打赏
- 举报
最好封装容器box可以上overflow:hidden的样式...这样,会好看很多...
cirfye 2009-04-02
- 打赏
- 举报
<body>
<script>
function moveLeft(t){
var ob1 = document.getElementById("b1");
var ob2 = document.getElementById("b2");
var ob3 = document.getElementById("b3");
var l1 = parseInt(ob1.style.left);
var l2 = parseInt(ob2.style.left);
var l3 = parseInt(ob2.style.left);
l1 = l1 - t;
l2 = l2 - t;
l3 = l3 - t;
ob1.style.left = l1 + "px";
ob2.style.left = l2 + "px";
ob3.style.left = l3 + "px";
}
function moveRight(t){
var ob1 = document.getElementById("b1");
var ob2 = document.getElementById("b2");
var ob3 = document.getElementById("b3");
var l1 = parseInt(ob1.style.left);
var l2 = parseInt(ob2.style.left);
var l3 = parseInt(ob2.style.left);
l1 = l1 + t;
l2 = l2 + t;
l3 = l3 + t;
ob1.style.left = l1 + "px";
ob2.style.left = l2 + "px";
ob3.style.left = l3 + "px";
}
</script>
<div id="box" style="position:relative;width:250px;height:20px;background-color:red;">
<div id="b1" style="position:absolute;width:100px;top:0px;left:0px;height:20px;">多层并列</div>
<div id="b2" style="position:absolute;width:100px;top:0px;left:100px;height:20px;">多层并列</div>
<div id="b3" style="position:absolute;width:100px;top:0px;left:200px;height:20px;">多层并列</div>
<div>
<div style="position:relative;top:20px;width:250px;height:20px;">
<input type=button id=btn1 value=" < " onclick="moveLeft(5);" />
<input type=button id=btn2 value=" > " onclick="moveRight(5);" />
</div>
</body>
<script>
function moveLeft(t){
var ob1 = document.getElementById("b1");
var ob2 = document.getElementById("b2");
var ob3 = document.getElementById("b3");
var l1 = parseInt(ob1.style.left);
var l2 = parseInt(ob2.style.left);
var l3 = parseInt(ob2.style.left);
l1 = l1 - t;
l2 = l2 - t;
l3 = l3 - t;
ob1.style.left = l1 + "px";
ob2.style.left = l2 + "px";
ob3.style.left = l3 + "px";
}
function moveRight(t){
var ob1 = document.getElementById("b1");
var ob2 = document.getElementById("b2");
var ob3 = document.getElementById("b3");
var l1 = parseInt(ob1.style.left);
var l2 = parseInt(ob2.style.left);
var l3 = parseInt(ob2.style.left);
l1 = l1 + t;
l2 = l2 + t;
l3 = l3 + t;
ob1.style.left = l1 + "px";
ob2.style.left = l2 + "px";
ob3.style.left = l3 + "px";
}
</script>
<div id="box" style="position:relative;width:250px;height:20px;background-color:red;">
<div id="b1" style="position:absolute;width:100px;top:0px;left:0px;height:20px;">多层并列</div>
<div id="b2" style="position:absolute;width:100px;top:0px;left:100px;height:20px;">多层并列</div>
<div id="b3" style="position:absolute;width:100px;top:0px;left:200px;height:20px;">多层并列</div>
<div>
<div style="position:relative;top:20px;width:250px;height:20px;">
<input type=button id=btn1 value=" < " onclick="moveLeft(5);" />
<input type=button id=btn2 value=" > " onclick="moveRight(5);" />
</div>
</body>
