一个有趣的布局


 
尝试一下,不用定位,只用浮动,就把这个排版排出来看看。

不要被她迷惑了,其实没你想的那么难

实在想不出来,可以看这里

《一个有趣的布局》有18个想法

  1. 小飞, 我跟你的有点点不一样。 呵呵

    #wrap{width:300px;height:300px; margin:20px auto;}
    #a,#b,#c,#d,#e{float:left;}
    #a{width:100px; height:200px; background-color:#999999;}
    #b{width:200px; height:100px; background-color:#FF0000;}
    #c{width:100px; height:100px; background-color:#FFCC00;}
    #d{width:100px; height:200px; background-color:#0033CC; float:right;}
    #e{width:200px; height:100px; background-color:#00FF00; float:right;}

  2. #wrap {height:240px;width:240px;}
    #a{background:gray;float:left;height:160px;width:80px;}
    #b{background:red;float:left;height:80px;width:160px;}
    #c{background:green;float:left;height:80px;width:80px;}
    #d{background:blue;float:right;height:160px;width:80px;}
    #e{background:yellow;float:left;height:80px;width:160px;}

  3. *{ padding:0; margin:0;}
    .wrapper{ width:300px; height:300px; border:1px solid black; overflow:hidden;}
    .a { float:left; width:100px; height:200px; background-color:gray;}
    .b { float:left; width:200px; height:100px; background-color:red;}
    .c { float:left; width:100px; height:100px; background-color:green;}
    .d { float:left; width:200px; height:100px; background-color:yellow;}
    .e { float:left; width:100px; height:200px; background-color:blue; margin-top:-100px;}

  4. #wrap{width:300px;background:green;border:#000 1px solid;}

    #a{background:gray;float:left;width:100px;height:200px;}
    #b{background:red;float:left:width:200px;height:100px;}

    #d{background:blue;float:right;width:100px;height:200px;}
    #e{background:yellow;float:left;width:200px;height:100px;}

    c那个div,我用wrap的背景色代替了:)同理,其他几个也可以用arap的背景色代替。

    1. 呵呵,其实这个例子并不是说颜色问题,只是说这样一种布局,实际应用中可以放别的内容的,颜色只是为了区分清楚而已咯~

  5. 你好,高高手,我遇到两个问题,一个是使用jq1.2.6版本无法移除hover事件函数,用1.1版本可以移除,另外一个是在编写图片自动变换焦点事件时候,把函数写在ready时候,在ff下显示不正常,在ie下正常,请问怎么解决,请给你邮箱,我把相关源代码发送到你邮箱,请帮助解决,谢谢。

    1. hover用.unbind(“mouseenter mouseleave”);可以取消绑定,图片的嘛,写个最小化的DEMO自己调试调试看看吧~

  6. mouseenter与mouseleave是两个事件吗,是在jq1.2.6定义的吗,没有看到,不过我明天试验一下

  7. 你太有才了,解决了移除hover事件函数,在ie下完全正常,但是在ff下,在制作图像传送带时候,向左移动的,正常,但是右边覆盖的不正常,显示不出来箭头。具体请下载源码并且看http://book.learningjquery.com/bookstore/index.html,就是这个实例,中间图像移动那个,老外这本书的这个也没有解决ff下不显示右箭头啊,还出书的呢,呵呵。
    另外可以不用绑定bind方法,好像用hover也可绑定mouseenter与mouseleave两个事件。然后用移除事件就可以了。请你多费心了。

  8. 补充一下,是右边那个要将鼠标移除图像外,然后在移动进入图像区域,才显示加载的箭头。连续将鼠标停放在图像上面,就没有箭头了。但是ie没有这种现象。

    1. 想办法在移动后直接触发一下mouseenter事件吧,勉强能糊弄过去的~也许有戏。具体没试过。

  9. 为什么左边的那个箭头有,右边的就没有呢,怪了,同样的原理啊

发表评论