zoukankan      html  css  js  c++  java
  • 网易笔试题目:三列布局,中间自适应宽度,双飞翼布局,及问题

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .wrap{
                width: 100%;
            }
            .one{
                float: left;
                width: 100px;
                margin-right: -100px;
                background: yellow;
                min-height: 100px;
            }
            .three{
                float: right;
                width: 100px;
                margin-left: -100px;
                min-height: 100px;
                background: green;
            }
            .wrap_two{
                width: 100%;
                float: left;
            }
            .two{
                margin: 0 110px 0 110px;
                min-height: 100px;
                background: purple;
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        <div class="one">第一个</div>
        <div class="wrap_two">
            <div class="two">第二个</div>
        </div>
        <div class="three">第三个</div>
    
    </div>
    </body>
    </html>

    思考,首先水平,水平的办法有那么几种,display:inline-block;float,但是这种方法width不生效,所以float方法,双飞翼就是中间宽度为100%,两边六点空,挂上翅膀,两边的翅膀宽度和对中间身体的拉进来的值相等,他们margin的是中间列的父级div也就是wrap_two,中间列在wrap_two内部两边留白之后就是中间的实际宽度。

    效果图如下:

    但是测试了一下其他的事件,发现

    <div class="one">第一个</div>
    
    $(".one").click(function(){
    alert();
    })

    这样并不能触发,但是这样是可以触发的:

    $(".wrap_two").click(function(){
                        alert();
                    })

    原因就是wrap_two这个div是100%的,而且元素在one后面,所以z-index比one高,解决办法是在one加上:

    position: relative;
                z-index: 10;

    这样就ok了。

  • 相关阅读:
    在线JS代码调试网址
    NVM在windows系统下载及安装
    浏览器【插件】【扩展】下载安装
    JavaScript 秘密花园
    HTTP 协议
    移动端:zepto框架
    移动端:移动端事件
    移动端:移动端页面布局
    移动端:Flex弹性盒布局
    移动端:自适应和响应式布局
  • 原文地址:https://www.cnblogs.com/siwy/p/5312253.html
Copyright © 2011-2022 走看看