css实现左边定宽,右边自适应布局

在布局中,常常出现左边定宽,右边自适应布局的情况,抽象出来的代码是:

//css代码
* {
            padding: 0;
            margin: 0;
            color: #fff;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            box-sizing: border-box;
        }
        aside {
            width: 200px;
            height: 200px;
            padding-top: 75px;
            background: #5A6A94;
        }
        section {
            height: 200px;
            padding-top: 75px;
            background: #BE4F4F;
        }
 
//html代码
<!-- 左边定宽 -->
    <aside class="left">Left</aside>
    <!-- 右边自适应 -->
    <section class="right">Right</section>

效果图:

那么,要实现如下图的效果,应该怎么做那:

1.浮动布局

  • 左边设置左浮动,右边宽度设置100%
.left{
    float:left;
}
.right{
     width:100%;
}
  • 左边浮动,右边加上一个margin-left值
        .left{
            float:left;
        }
        .right{
            margin-left: 200px; /*等于左边栏宽度*/
        }

2.flex布局

父容器设置 display:flex;Right部分设置 flex:1

        body{
            display: flex;
        }
        .right{
            flex:1
        }

3.使用负margin

首先修改页面结构,为自适应部分添加容器 .container, 同时改变左右部分的位置,如下:

<div class="container">
    <section class="right">Right</section>
</div>
<aside class="left">Left</aside>

设置样式:

        .left{
            float:left;
            margin-left: -100%;
        }
        .right{
            margin-left: 200px;
        }
        .container{
            float:left;
            width:100%
        }

4.绝对定位

左右两边都绝对定位

        .left{
            position: absolute;
            left:0;
        }
        .right{
            position: absolute;
            left:200px;
            width:100%
        }

5.table布局

        body{
            display: table;
            width:100%;
        }
        .left{
            display: table-cell;
        }
        .right{
            display: table-cell;
        }

使用table-cell还可以实现很多的布局,需要自己去发挥想象。总结下来也就需要记住几点,设置了display:table-cell的元素具有以下特性。

  • text-align、vertical-align等对齐属性起作用,margin不起作用。宽高百分比值不起作用。
  • 会生成虚拟的table、tr把自己包裹住,如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住,并一行等高显示
  • 多个table-cell元素会占满被设置了display: table的元素的宽度,如果一个元素被设置了宽度,那么其他剩余的table-cell元素会占满剩下的宽度。当然,如果只有一个table-cell元素,就算设置了宽度也会占满table元素的宽度。
  • 对设置了float、absolute的元素不起作用。且IE6、7不支持

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,900评论 1 83
  • ======= SEO专用 table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行...
    木白no1阅读 7,632评论 1 14
  • display:设置元素的显示方式 display:block(块级元素) 默认为父元素宽高,可设置宽高相对前序换...
    bluishwhiteC阅读 188评论 0 0
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 1,605评论 0 24
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 4,267评论 3 28