两栏布局，左边定宽，右宽自适应，左边宽与右边保持一致

转载于 2017-05-23 08:04:00 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gangerdai/p/6892321.html

本文介绍了一种使用CSS的Flex布局实现左侧固定宽度而右侧自适应宽度的布局方法。通过简单的HTML结构配合特定的CSS样式，可以轻松创建出响应式的左右布局。此布局适用于多种前端应用场景。

见代码

    <div id="wrap">
        <div id="left">
            <h1>134132412</h1>
            <h1>134132412</h1>
        </div>
        <div id="right">
            <h1>134132412</h1>
            <h1>134132412</h1>
            <h1>134132412</h1>
            <h1>134132412</h1>
            <h1>134132412</h1>
            <h1>134132412</h1>
        </div>
    </div>

css代码

<style type="text/css">
        #wrap {
            width: 100%;
            height: 100%;
            background-color: aqua;
            border: 1px solid black;
            border-bottom: 0px solid trans;
            display: flex;
        }
        
        #left {
            width: 300px;
            background-color: yellow;
            border: 1px solid black;
        }
        
        #right {
            flex:1;
            background-color: red;
            border: 1px solid black;
            overflow-x:hidden;

        }
        
        #left h1 {
            width: 100%;
            height: 100px;
        }
        
        #right h1 {
            width: 100%;
            height: 100px;
        }
    </style>