美文网首页
左边固定,右边自适应布局(四种方法:负边距、flex)

左边固定,右边自适应布局(四种方法:负边距、flex)

作者: 如烟灬 | 来源:发表于2019-01-11 14:38 被阅读13次

    左边固定,右边自适应布局(四种方法:负边距、flex)

    1、左position:absolute, 右margin-left 

    <div class="parent">

            <div class="l-child"></div>

            <div class="r-child"></div>

    </div>

    //父元素相对定位,作为子元素绝对定位的参考

    .parent{display:relative;background:#ddd}

    .l-child{position:absolute;width:100px;background:#bbb}

    .r-child{margin-left:100px;background:#999}

    2、左边float,触发父元素宽度计算 

    html结构同上

    .parent{background:#ddd;overflow:hidden; }

    .l-child{float:left;width:100px;background:#bbb;z-index:10000; }

    .r-child{margin-left:100px;background:#999;}

    3、左右浮动,右边使用负边距

    <div class="parent">

            <div class="l-box"></div>

            <div class="r-box">

                    <div class="r-content">中文</div>

            </div>

            <div class="l-box">中文网</div>

    <./div>

    .parent{background:#ddd;overflow:hidden; }

    .l-box{float:left;width:100px;background:#bbb;}

    .r-box{float:right;width:100%;margin-left:-100px;background:#999;}

    .r-content{margin-left:100px;}

    4、flex布局 

    父元素flex布局后,子元素默认就是弹性布局,除非你确定子元素的弹性方式

    ps:这个方法完美之处还在于,垂直方向也自动填充,轻松实现了等高布局!!

    html同第一个demo

    .parent{display:flex;background:#ddd}

    .l-child{flex:00100px;background:#bbb}

    .r-child{background:#999}

    相关文章

      网友评论

          本文标题:左边固定,右边自适应布局(四种方法:负边距、flex)

          本文链接:https://www.haomeiwen.com/subject/mhsxdqtx.html