任务三-三栏布局

时间 2019-11-10

标签任务布局繁體版

原文原文链接

百度前端技术学院任务三：三栏布局，地址任务三：三栏布局css

描述
- 使用 HTML 与 CSS 按照示例图（点击查看）实现三栏式布局。
- 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。

实现

使用float，兼容IE8(含)+、FF、Chrome

<body>
    <div class="team-logo">
        <img src="team-logo.jpg"><h2>我叫MT</h2>
    </div>
    <div class="members-logo">
        <ul>
            <li><img src="member-1.jpg" alt=""></li>
            <li><img src="member-2.jpg" alt=""></li>
            <li><img src="member-3.jpg" alt=""></li>
            <li><img src="member-4.jpg" alt=""></li>
            <li><img src="member-5.jpg" alt=""></li>
        </ul>
    </div>
    <div class="main-content">
        <p>百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性，但即便如此，真正决定课程效果的，仍是你的每一次思考和实践。</p>
        <p>课程多数题目的解决方案都不是惟一的，这和咱们在实际工做中的状况也是一致的。所以，咱们的要求不单单是实现设计稿的效果，更是要多去思考不一样的解决方案，评估不一样方案的优劣，而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案，一样也能够帮助咱们学到不少知识。因此，咱们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信经过和小伙伴们的交流，能让你的学习事半功倍。</p>
    </div>
</body>

html, body {
        background: #eee;
        margin: 0;
    }
    html {
        padding: 20px;
        min-width: 520px;
    }
    .team-logo, .main-content, .members-logo {
        background: #fff;
        border: 1px solid #999;
        padding: 20px;
        min-height: 80px;
    }
    .team-logo {
        width: 160px;
        float: left;
    }
    .team-logo img {
        display: block;
        float: left;
    }
    .team-logo h2 {
        text-align: center;
        width: 80px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .members-logo {
        width: 80px;
        float: right;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .members-logo ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .members-logo ul li {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-content {
        margin-left: 222px;
        margin-right: 142px;
        min-width: 120px;
    }

使用flex，兼容FF、Chrome

<body>
    <div class="team-logo">
        <img src="team-logo.jpg"><h2>我叫MT</h2>
    </div>
    <div class="main-content">
        <p>百度前端技术学院的课程任务是由百度前端工程师专为对前端不一样掌握程度的同窗设计。咱们尽力保证课程内容的质量以及学习难度的合理性，但即便如此，真正决定课程效果的，仍是你的每一次思考和实践。</p>
        <p>课程多数题目的解决方案都不是惟一的，这和咱们在实际工做中的状况也是一致的。所以，咱们的要求不单单是实现设计稿的效果，更是要多去思考不一样的解决方案，评估不一样方案的优劣，而后使用在该场景下最优雅的方式去实现。那些最终没有被咱们采纳的方案，一样也能够帮助咱们学到不少知识。因此，咱们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，可是背后的思考和亲手去实践倒是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信经过和小伙伴们的交流，能让你的学习事半功倍。</p>
    </div>
    <div class="members-logo">
    <ul>
        <li><img src="member-1.jpg" alt=""></li>
        <li><img src="member-2.jpg" alt=""></li>
        <li><img src="member-3.jpg" alt=""></li>
        <li><img src="member-4.jpg" alt=""></li>
        <li><img src="member-5.jpg" alt=""></li>
    </ul>
    </div>
</body>

html {
        margin: 0;
        padding: 20px;
        min-width: 435px;
    }
    body {
        display: flex;
        display: -webkit-flex;
        background: #eee;
        margin: 0;
        align-items: flex-start;
    }
    .team-logo, .members-logo, .main-content {
        border: 1px solid #999;
        background: #fff;
        padding: 20px;
    }
    .team-logo {
        display: inline-flex;
        align-items: flex-start;
    }
    .team-logo h2 {
        width: 80px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .members-logo {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .members-logo ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .members-logo ul li {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-content {
        margin-left: 20px;
        margin-right: 20px;
    }

多种方式可实现三栏式布局：圣杯布局、双飞翼布局、绝对定位布局、grid布局、flex布局