三列布局：绝对定位与浮动定位

最新推荐文章于 2022-02-11 11:19:47 发布

猫与猫寻

最新推荐文章于 2022-02-11 11:19:47 发布

阅读量108

点赞数

分类专栏：前端html 文章标签：定位 css html

本文链接：https://blog.csdn.net/a1399028618/article/details/118851201

版权

前端html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<div class="container">
        <div class="header">头部</div>
        <div class="main">主体</div>
        <div class="footer">底部</div>
    </div>

css

.container {
    width: 1000px;
    margin: 0 auto;
}

.header,
.footer {
    height: 60px;
    background-color: lightgray;
}

.main {
    min-height: 800px;
    background-color: lightblue;
    margin: 5px auto;
}

在这里插入图片描述
三列布局：绝对定位

 <div class="container">
        <div class="header">头部</div>


        <div class="main">
            <div class="left">左侧</div>
            <div class="content">内容区</div>
            <div class="right">右侧</div>

        </div>


        <div class="footer">底部</div>
    </div>

.container {
    width: 1000px;
    margin: 0 auto;
}

.header,
.footer {
    height: 60px;
    background-color: lightgray;
}

.main {
    min-height: 800px;
    background-color: lightblue;
    margin: 5px auto;
}


/* 主体分为三部分 */

.left {
    width: 200px;
    min-height: 800px;
    background-color: lightseagreen;
}

.content {
    min-height: 800px;
    background-color: lightgreen;
}

.right {
    width: 200px;
    min-height: 800px;
    background-color: coral;
}


/* 绝对定位 */


/* 定位父级 */

.main {
    position: relative;
}

.left {
    position: absolute;
    left: 0;
    top: 0;
}

.right {
    position: absolute;
    right: 0;
    top: 0;
}

.content {
    margin-left: 200px;
}

在这里插入图片描述
css浮动定位

.container {
    width: 1000px;
    margin: 0 auto;
}

.header,
.footer {
    height: 60px;
    background-color: lightgray;
}

.main {
    min-height: 800px;
    background-color: lightblue;
    margin: 5px auto;
}


/* 主体分为三部分 */

.left {
    width: 200px;
    min-height: 800px;
    background-color: lightseagreen;
}

.content {
    min-height: 800px;
    background-color: lightgreen;
}

.right {
    width: 200px;
    min-height: 800px;
    background-color: coral;
}


/* 浮动 */

.left {
    float: left;
}

.right {
    float: right;
}

.content {
    float: left;
    width: 600px;
    /* margin-left: 20px; */
}

.footer {
    clear: both;
}