• 三栏布局----自适应


    第一种方法:自身浮动+margin

    html:

    <div id="container">
    
                <div id="team">
                    <img src="img/a.jpg" width="80px" height="80px" class="teamLogo"/>
                    <div class="team-name">
                        趴趴熊,我们走
                    </div>
                </div>
    
    
                <div id="peopleList">
                    <img src="img/a.jpg" width="80px" height="80px" class="people-photo"/>
                    <img src="img/a.jpg" width="80px" height="80px" class="people-photo"/>
                    <img src="img/a.jpg" width="80px" height="80px" class="people-photo"/>
                    <img src="img/a.jpg" width="80px" height="80px" class="people-photo"/>
                </div>
    
    
                <div id="introduce">
                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                                    <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                        <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                        <p>
                        个人简介,是当事人全面而简洁地介绍自身情况的一种书面表达方式。求职过程中撰写的个人简介是求职者向欲供职单位全面、简洁、条理清晰地自我介绍、自我推荐的文书。简介是应用写作学研究的一种日常应用文体。
    
                    </p>
                    <p>
                        从某种意义上说,个人简介的写作不亚于参加面试。通过短短数百字的个人简介,不但要能较充分地展现出毕业生的才能及综合素质,而且要使聘任者感到自己是位思维清晰、条理性强、语言表达能力突出的应聘者。因此,写好个人简介是求职成功的第一步。 但是,在实际中,不少毕业生对个人简介和求职信之间的界线辨析不清,影向了求职效果。这里,我就先讲一下两者的区别与联系。
                    </p>
                </div>
    
            </div>

    css:

    body{
                    font-family: "微软雅黑",sans-serif;
                    padding: 20px;
                    font-size: 16px;
                }
    
                #container{
                    background-color: #eee;
                    border: solid #999 1px;
                    overflow: auto;
                    margin: 0 auto;
                    padding: 20px;
                    min-width: 600px;
                }
    
                #team{
                    width: 158px;
                    background-color: #fff;
                    padding: 20px;
                    border: solid 1px #999;
                    float: left;
                }
    
                .teamLogo{
                    /*脱离文档流*/
                    float: left;
                }
    
                .team-name{
                    /*由于旁边的图片是脱离文档流的,所以旁边的名字是会占据其位置,但是内容是不会占据位置*/
                    width: 179px;
                    font-size: 14px;
                    font-weight: bold;
                    text-align: center;
                    /*clear: both;*/
                }
    
    
                #peopleList{
                    width: 118px;
                    float: right;
                    border: solid #999 1px;
                    background-color: #fff;
                }
                /*设置了display:block 边距和并  img是inline-block*/
                .people-photo{
    
                    border: solid #999999 1px;
                    margin: 20px;
                    display: block;
    
                }
    
                /*自适应宽度   在html里面是最后写的  前面两个都是浮动,脱离了文档流*/
    
                /*因为据左,据右的距离已经设置好了,故里面的内容宽度库随着浏览器变化而变化*/
                #introduce{
                    padding: 20px;
                    margin-left: 220px;
                    margin-right: 140px;
                    background: #fff;
                    border: 1px solid #999;
                }

    注意:

    1. 中间的部分一定是放在最后加载,因为因为div.introduce不能定义float属性,一旦定义了float:left/right便自带定义了display:inline-block属性,使div.main的宽度等于自身内容的宽度,这样就达不到我们自适应栏的要求了;
    2. 但是如果div.introduce不定义float:left/right属性并且位于div.team或div.peopleList的前面,
      那么div.team或div.peopleList将无法浮动于div.introduce的左侧或右侧。

    第二种方法:决定定位+margin

    html:

    <div class="parent">
                <div class="main"></div>
                <div class="left"></div>
                <div class="right"></div>
            </div>

    css:

            html{
                height: 100%;
            }
            body{
                height: 100%;
                margin: 0;
            }
            .parent {
    
        position: relative;
        height: 100%;
        border: 1px solid #000000;
        margin: 0 auto;
    }
    .left, .right{
        position: absolute;
    
        top: 0;
        width: 200px;
        height: 100%;
        margin: 0 10px;
    }
    .left{
        left: 0;
        background: #EE88AA;
    
    }
    .right{
        right: 0;
        background: #F06D06;
    }
    .main{
    
        background: #8EC63F;
        margin: 0 220px;
        height: 100%;
    }

    最任意理解和最容易明白的, 兼容性好;由于div.left和div.right使用了绝对定位,脱离了文档流,所以,div.left、div.right和div.main的加载顺序可以随意。


    参考资料:张鑫旭的博客
    github:demo地址

  • 相关阅读:
    (15)树莓派系统安装和备份
    (0-0) 树莓派学习资料
    (14)树莓派
    (0-1) 树莓派常用软件及服务
    (13)flask搭建服务器
    (12)树莓派串口通信
    OpenCV 学习笔记(0)两幅图像标定配准
    OpenCV 学习笔记(9)RGB转换成灰度图像的一个常用公式Gray = R*0.299 + G*0.587 + B*0.114
    OpenCV 学习笔记(8)彩色图像RGB通道的分离、合并与显示
    Arduino OV7670 live image over USB to PC
  • 原文地址:https://www.cnblogs.com/linewman/p/9918381.html
Copyright © 2020-2023  润新知