margin在多栏布局上的应用

最新推荐文章于 2022-02-09 10:53:47 发布

茂树24

最新推荐文章于 2022-02-09 10:53:47 发布

阅读量417

点赞数

分类专栏： CSS2.1 文章标签： margin 多栏布局左栏定宽-右栏自适应多栏等高布局左右固定中间自适应

本文链接：https://blog.csdn.net/wmaoshu/article/details/52893666

版权

CSS2.1 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

左栏定宽，右栏自适应方法一使用浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左栏定宽，右栏自适应 方法一 使用浮动</title>
    <style>
        div {
            width: 400px;
        }
        div img {
            width: 200px;
            float: left;
        }
        div div {
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/image1.jpg">
            <div>如上例这类布局效果（左边一个固定图片，右边为内容），负margin能够替代float浮动布局，进行左右布局规划，并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮，这个是做什么用的呢？你可以使用标准浏览器查看上方例子，依次点击变宽按钮至宽度最大，再点击不设置最小宽度按钮，你会发现出现了一个Bug。负margin用作布局效果的确有其独到之处，但自身也有一个小的缺陷，即如果内部最后一个子元素使用负margin上移后，由于父元素是其边距元素，其实际高度由于内部子元素上移也会跟着变小。解决方式就是设置一个最小高度，最小高度值为较小的固定元素高度（此例即为左边固定的图片高度），就可彻底解决负margin上移影响父元素高度Bug。</div>
    </div>
</body>
</html>

左栏定宽，右栏自适应方法二使用负margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左栏定宽，右栏自适应 方法二 使用负margin</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    div.box {
        width: 80%;
        border: 1px solid;
        min-height: 200px;
        _height: 200px; /*IE6一下兼容*/
    }
    img {
        width: 200px;
        height: 120px;
    }
    p {
        margin-left: 210px;
        margin-top:-120px;
    }
    </style>
</head>
<body>
    <div class="box">
    <img src="images/image.jpg">
    <p class="content">如上例这类布局效果（左边一个固定图片，右边为内容），负margin能够替代float浮动布局，进行左右布局规划，并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮，这个是做什么用的呢？你可以使用标准浏览器查看上方例子，依次点击变宽按钮至宽度最大，再点击不设置最小宽度按钮，你会发现出现了一个Bug。负margin用作布局效果的确有其独到之处</p>
    </div>
</body>
</html>

多栏等高布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多栏等高布局</title>
    <style>
        div.box {
            width: 80%;
            margin: 0 auto;
            overflow:hidden;
            /*
            overflow 除了超出包含快隐藏之外，还有清理浮动
             */
        }
        div[class*="content"]{
            float: left;
            padding-bottom: 1000px;
            margin-bottom: -1000px;
            /*这两行代码是关键
            padding-bottom: 1000px; 这个1000是随便设置的 选择padding的目的是因为padding区域有背景色
            margin-bottom: -1000px;通过这个设置，一个是 使包含快的下边界向上移动1000px，二一个是因为要将下padding全部通过包含快overflow给隐藏掉，如果想使这三个元素有下padding值比如200px的话，可以将margin-bottom: -800px
            */
        }
        div.content1 {
            width: 20%;
            background-color: darkred;
        }
        div.content2 {
            width: 60%;
            background-color: yellowgreen;
        }
        div.content3 {
            width: 20%;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content1">
            <p>
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
            </p>
        </div>
        <div class="content2">
            <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字


            </p>
        </div>
        <div class="content3">
            <p>
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            </p>
        </div>
    </div>
</body>
</html>

左右固定中间自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右固定中间自适应</title>
    <style>
        div {
            height: 100px;
        }
        .box {
            width: 80%;
            margin: 0 auto;
        }
        .left,.right {
            width:200px;
        }
        .left {
            float: left;
            background-color: yellowgreen;

        }
        .center {
            margin: 0 220px;
            background-color: blueviolet;

        }
        .right {
            float: right;
            background-color: greenyellow;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>
</html>

茂树24

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin在多栏布局上的应用

左栏定宽，右栏自适应方法一使用浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左栏定宽，右栏自适应方法一使用浮动</title> <style> div { width: 400px; } div im
复制链接

扫一扫