css 4种方法实现左右两侧固定 中间自适应布局

先来看一下最终效果:
css 4种方法实现左右两侧固定 中间自适应布局_第1张图片
代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .con{
            height:200px;
            background:#ccc;
            margin-bottom:10px;
        }
        .con_l,.con_r{
            width:200px;
            height:80%;
        }
        .con_l{
            background:plum;
        }
        .con_r{
            background:saddlebrown;
        }
        .con_c{
            height:100%;
            background:slateblue;
        }
        /* 1. float + bfc */
        .con1_l{
            float:left;
        }
        .con1_r{
            float:right;
        }
        .con1_c{
            overflow: hidden;
        }
        /* 2. float + padding*/
        .con2_l{
            float:left;
        }
        .con2_r{
            float:right;
        }
        .con2_c{
            padding:0px 200px;
        }
        .con2_c_con{
            height:100%;
            background:teal;
        }
        /* 3 float + margin  */
        .con3_l{
            float:left;
        }
        .con3_r{
            float:right;
        }
        .con3_c{
            margin:0px 200px;
        }
        /* 4 position */
        .con4{
            position:relative;
        }
        .con4_l{
            position:absolute;
        }
        .con4_r{
            position:absolute;
            right:0px;
        }
        .con4_c{
            margin:0px 200px;
        }
    style>
head>
<body>
    
    <div class="con">
        <div class="con_l con1_l">左侧左侧左侧左侧左侧左侧div>
        <div class="con_r con1_r">右侧右侧右侧右侧右侧右侧div>
        <div class="con_c con1_c">中间中间中间中间中间中间div>
    div>
    
    <div class="con">
        <div class="con_l con2_l">左侧左侧左侧左侧左侧左侧div>
        <div class="con_r con2_r">右侧右侧右侧右侧右侧右侧div>
        <div class="con_c con2_c">
            <div class="con2_c_con">中间中间中间中间中间中间div>
        div>
    div>
     
     <div class="con">
        <div class="con_l con3_l">左侧左侧左侧左侧左侧左侧div>
        <div class="con_r con3_r">右侧右侧右侧右侧右侧右侧div>
        <div class="con_c con3_c">中间中间中间中间中间中间div>
    div>
     
     <div class="con con4">
        <div class="con_l con4_l">左侧左侧左侧左侧左侧左侧div>
        <div class="con_r con4_r">右侧右侧右侧右侧右侧右侧div>
        <div class="con_c con4_c">中间中间中间中间中间中间div>
    div>
body>
html>

没有写太多的原理,看不懂的话,可以看上一篇文章,《css 8种方法实现 左侧固定右侧自适应》,链接:https://blog.csdn.net/Charissa2017/article/details/103840885

你可能感兴趣的:(css案例)