200分!多个div并列在一起.200分!

avonqin 2009-04-02 04:35:39

如下代码:



<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();" >

内层宽度超过了外层,但是我要内层都并列在一起显示,并且页面加个按钮,点击它时,内层可以水平移动以达到能浏览完整的目的.

在线等候. 谢谢!

...全文

223 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

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>