div+css 三栏式布局

最新推荐文章于 2024-11-14 19:48:05 发布

原创最新推荐文章于 2024-11-14 19:48:05 发布 · 619 阅读

1 ·

CC 4.0 BY-SA版权

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

15 篇文章

订阅专栏

css学习

7 篇文章

订阅专栏

本文介绍了三种不同的三栏式布局方法，通过HTML和CSS实现固定宽度的左右侧边栏和中间主体内容区域。每种方法都有其特点，适用于不同场景下的网页布局需求。

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>