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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了左边固定,右边自适应布局(四种方法:负边距、flex)相关的知识,希望对你有一定的参考价值。

参考技术A 1、左position:absolute, 右margin-left 

<div class="parent">

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

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

</div>

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

.parentdisplay:relative;background:#ddd

.l-childposition:absolute;width:100px;background:#bbb

.r-childmargin-left:100px;background:#999

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

html结构同上

.parentbackground:#ddd;overflow:hidden;

.l-childfloat:left;width:100px;background:#bbb;z-index:10000;

.r-childmargin-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>

.parentbackground:#ddd;overflow:hidden;

.l-boxfloat:left;width:100px;background:#bbb;

.r-boxfloat:right;width:100%;margin-left:-100px;background:#999;

.r-contentmargin-left:100px;

4、flex布局 

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

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

html同第一个demo

.parentdisplay:flex;background:#ddd

.l-childflex:00100px;background:#bbb

.r-childbackground:#999

以上是关于左边固定,右边自适应布局(四种方法:负边距、flex)的主要内容,如果未能解决你的问题,请参考以下文章

CSS布局 , 单列宽度固定,另一列自适应。

如何通过 CSS 实现一个左边固定宽度右边自适应的两列布局

flex布局左边固定,右边自适应,右边内容超出会影响布局

两栏布局——左侧固定右侧自适应

左右布局,左边定宽,右边自适应。

flex布局 一侧固定宽度 一侧自适应