div+css 三栏式布局

最新推荐文章于 2023-10-25 20:45:03 发布

Sukla

最新推荐文章于 2023-10-25 20:45:03 发布

阅读量473

点赞数

分类专栏： html学习 css学习

本文链接：https://blog.csdn.net/Sukla/article/details/78817020

版权

html学习同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css学习

7 篇文章 0 订阅

订阅专栏

1，效果图

2，方法一

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>三栏式布局</title>
</head>
<style>
    .main{
        background-color: #22bd7a;
        margin:0 300px 0 200px;
        height: 500px;
    }
    .left{
        width: 200px;
        height: 100%;
        float:left;
        background-color: #005aa0;
    }
    .right{
        width: 300px;
        height: 100%;
        float:right;
        background: orange;
    }
    .clean{
        clear: both;
    }
    .container{
        width: 100%;
        min-width: 600px;
        height: 500px;
    }
</style>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
    <div class="clear"></div>
</div>
</body>
</html>

3，方法二

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>三栏式布局</title>
</head>
<style>
    .container{
        min-width: 500px;
        padding:0 300px 0 200px;
        height: 100%;
    }
    .clear{
        clear: both;
    }
    .main{
        height: 500px;
        float: left;
        width: 100%;
        background: #22bd7a;
    }
    .left{
        float: left;
        background: #005aa0;
        width: 200px;
        height: 100px;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    .right{
        float: right;
        background: orange;
        margin-right:-300px;
        width: 300px;
        height: 100px;
    }
</style>
<body>
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>
</body>
</html>

4，方法三

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>三栏式布局</title>
</head>
<style>
    .container {
        min-width: 600px;
        width: 100%;
        height: 500px;
    }

    .floatwarp {
        float: left;
        width: 100%;
    }

    .main {
        height: 500px;
        background-color: #005aa0;
        margin: 0 300px 0 200px;
    }

    .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: #22bd7a;
        margin-left: -100%;
    }

    .right {
        float: left;
        width: 300px;
        height: 100%;
        background-color: orange;
        margin-left: -300px;
    }

    .clear {
        clear: both;
    }
</style>
<body>
<div class="container">
    <div class="floatwarp">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>
</body>
</html>

Sukla

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div+css 三栏式布局

1，效果图2，方法一三栏式布局 .main{ background-color: #22bd7a; margin:0 300px 0 200px; height: 500px; } .left{ width: 200px; height: 100%;
复制链接

扫一扫