首页 新闻 搜索 专区 学院

这样的布局怎么实现?不限宽度,内容循环出来,还排3行显示?

0
悬赏园豆:30 [已解决问题] 解决于 2013-03-20 21:42

遇到奇葩客户,死活要这效果,明显是需要flash实现。html怎么实现如下图的效果。内容输出N多个,左右拉动,说明ul 的长度肯定是不限制的,那么,我想知道,如何让li听话排成3行。。。如图,第一个,第二个,第三个,再回到顶部---输出第四个。。。第五个。。。。。奇葩啊!这样怎么搞?

 

 

奇葩客户参考这个得来的,我都弄不明白怎么循环输出内容。。。http://www.guoansh.com/project.php?cpage=31

 

求解

酸番茄的主页 酸番茄 | 初学一级 | 园豆:87
提问于:2013-03-01 16:54
< >
分享
最佳答案
1
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .c{zoom:1;}
    .c:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
    body{
        padding: 30px;
    }
    .imgBox{
        position: relative;
        height: 190px;
        overflow: hidden;
        vertical-align: top;
        padding: 0 60px;
        border: 1px  solid #7FE22A;
    }
    .imgBox .left, .imgBox .right{
        width: 20px;
        height: 20px;
        background: #000;
        position: absolute;
        top: 50%;
        margin-top: -10px;
    }
    .imgBox .left{
        left: 15px;
    }
    .imgBox .right{
        right: 15px;
    }
    .imgBox .imgContent{
        position: absolute;
        left: 0;
        top: 0;
        padding:0 60px;
    }
    img{
        display: block;
        float: left;
        width: 50px;
        height: 50px;
        border: 2px solid red;
        margin: 5px;
    }
    </style>
</head>
<body>
    <div class="imgBox">
        <div class="left"></div>
        <div class="right"></div>
        <div class="imgContent c">
            <img src="" alt="111">
            <img src="" alt="222">
            <img src="" alt="333">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
            <img src="" alt="">
        </div>
    </div>
</body>
</html>

JS控制.imgBox .imgContenttop

收获园豆:30
风叶飘 | 初学一级 |园豆:167 | 2013-03-20 15:36
其他回答(4)
1

奇葩客户可以试试不走寻常路。

你用table给他布局。动态控制列。

写算法让图片按照你的思路走。

来自北方 | 园豆:395 (菜鸟二级) | 2013-03-01 16:58
0

好像有这样的效果吧

jerry-Tom | 园豆:4077 (老鸟四级) | 2013-03-01 17:17
0

js应该也能实现的。不过建议你还是用table实现吧比较方便,你可以自己取决,只是建议。或者你用一个循环的形式可以不,就像一个九宫格一样的。控制图片

试试可以不

妍珊 | 园豆:1169 (小虾三级) | 2013-03-01 17:55
0

外层DIV,整体高宽固定,里面DIV高宽固定,全部左浮动,加好图片,设置好padding,最后面加一个DIV,clear:both

寂静之秋 | 园豆:216 (菜鸟二级) | 2013-03-02 15:28

这样的话,不就全在第一行无限往下排了?第二行,第三行就没东西了、

支持(0) 反对(0) 酸番茄 | 园豆:87 (初学一级) | 2013-03-06 08:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册