您的位置：首页 > Web前端 > CSS

CSS左侧固定宽右侧自适应（兼容所有浏览器）

2018-02-06 14:22 507 查看

4000

方法一、浮动布局

[html] view
plain copy

HTML

<div id="left">Left sidebar</div>



<div id="content">Main Content</div>



CSS Code

<style type="text/css">



*{margin: 0;padding: 0;}

#left {

float: left;

width: 220px;

background-color: green;

}

#content {

background-color: orange;

margin-left: 220px;/*==等于左边栏宽度==*/

}

</style>

[html] view
plain copy

<span style="font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; line-height: 18px;">上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值</span>

方法二、

[html] view
plain copy

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{margin:0 auto;padding:0 auto;}

        #left {

            background-color: green;

            float: left;

            width: 220px;

            margin-right: -100%;

            /*min-height: 300px;*/

        }

        #content {

            float: left;

            width: 100%;

        }

        #contentInner {

            margin-left: 220px;/*==等于左边栏宽度值==*/

            background-color: orange;

            height: 400px;content高度不能自己变化，随着contentInner的高度变化而变化

        }

    </style>

</head>

<body>

    <div id="left">

        Left Sidebar

    </div>

    <div id="content">

        <div id="contentInner">

            Main Content

        </div>

    </div>

</body>

</html>

方法三……

详情见：http://www.cnblogs.com/dearxinli/p/3799094.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

CSS左侧固定宽 右侧自适应（兼容所有浏览器）

CSS左侧固定宽右侧自适应（兼容所有浏览器）