html基本布局1---div嵌套布局

需求：div3 宽100R% ,高100px,内部包含div1和div2; div1 宽100px,高100px, 如何使div2宽度充满剩余空间（尽量使用css实现）

解决方案1---弹性盒布局：

        .div3{
            width: 100%;
            height: 100px;
            display: flex;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div2{
            flex: 1;
            height: 100px;
            background-color: #aaaaaa;
        }

解决方案2---CSS3新属性 calc：

        .div3{
            width: 600px;
            height: 100px;
        }
        .div1{
            float:left;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div2{
            float:left;
            width:calc(100% - 100px);
            height: 100px;
            background-color: #aaaaaa;
        }

兼容性参考：

解决方案3---定位+margin：

        .div3{
            text-align: center;
            line-height: 100px;
            width: 100%;
            height: 100px;
        }
        .div1{
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div2{
            margin-left: 100px;
            height: 100px;
            background-color: #aaaaaa;
        }

解决方案4---定位+box-sizing：

        .div3{
            text-align: center;
            line-height: 100px;
            width: 100%;
            height: 100px;
            box-sizing: border-box;
            padding-left: 100px;
        }
        .div1{
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div2{
            width: 100%;
            height: 100px;
            background-color: #aaaaaa;
        }

如有其他更好的方案，不吝赐教~

 

转载于:https://www.cnblogs.com/ilaozhao/p/9200880.html