三栏布局----自适应

第一种方法：自身浮动+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地址