HTML5基础加强css样式篇（负右外边实例）（四十九）

最新推荐文章于 2025-04-30 15:58:09 发布

咸鸭蛋炒饭

最新推荐文章于 2025-04-30 15:58:09 发布

阅读量454

点赞数

分类专栏： HTML5基础篇文章标签： css html5 经验 html css3

本文链接：https://blog.youkuaiyun.com/u010853130/article/details/70314225

版权

HTML5基础篇专栏收录该内容

121 篇文章

订阅专栏

1.利用负右外边距实现右侧固定左侧自适应布局结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        /*
            需求：
            左侧自适应（随着浏览器窗口宽度的变化而变化）
            右侧固定宽度


            1.两列都需要设置浮动
            2.第一列设置 100%　宽度，同时设置右侧外边距为负，绝对值 ＝ 第二列的宽度
            3.第一列的内容需要一个正常文档流的块元素承载，设置右侧外边距 = 第二列的宽度
        */

        .col-1 {
            width: 100%;
            height: 210px;
            background-color: blue;
            font-size: 72px;
            margin-right: -200px;
            float: left;
        }
        .col-2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-top: 0px;

            float: left;
        }
        .col-left{
            margin-right: 200px;
        }

    </style>
</head>
<body>

    <div class="col-1">
        <div class="col-left">
            Hello Hello Hello Hello Hello Hello
        </div>
    </div>
    <div class="col-2">
        hello
    </div>

<script type="text/javascript">
</script>
</body>
</html>

2利用浮动实现左侧固定右侧自适应布局结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*

        需求：
        右侧自适应（随着浏览器窗口宽度的变化而变化）
        左侧固定宽度


        1.第一列设置固定的宽度，设置左浮动。
        2.使用overflow: hidden 开启BFC，重新计算元素的宽度，（切记不要设置固定，使用浏览器默认值）

        */
    .col-1 {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .col-2 {
        /*width: 100%;*/
        height: 210px;
        background-color: orange;
        overflow: hidden;
    }



</style>
</head>
<body>

<div class="col-1"></div>
<div class="col-2"></div>

<script type="text/javascript">
</script>
</body>
</html>

3.综合应用实现两端固定中间自适应布局结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

/*
        需求：两边固定，中间自适应
*/

        .layout {
            height: 200px;
            background-color: orange;
        }
        .col-left{
            width: 100%;
            float: left;
            height: 200px;
            background-color: pink;
            margin-right: -200px;
        }
        .col-right{
            float: left;
            width: 200px;
            height: 200px;
            background-color: #254282;
        }
        .content{
            margin-right: 200px;
        }

        .col-left-1{
            width: 200px;
            height: 200px;
            float: left;
            background-color: #ff0000;
        }

        .col-left-2{
            height: 210px;
            background-color: #bbbbbb;
            overflow: hidden;
        }

    </style>
</head>
<body>

<div class="layout">
    <div class="col-left">
        <div class="content">
            <!--固定的宽度-->
            <div class="col-left-1"></div>
            <!--自适应的宽度-->
            <div class="col-left-2"></div>

        </div>
    </div>
    <div class="col-right"></div>
</div>

<script type="text/javascript">
</script>
</body>
</html>