任务三-三栏布局

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

描述
- 使用 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布局

posted @ 2017-02-06 17:50 天字天蝎阅读(269) 评论(0) 编辑收藏举报

刷新页面返回顶部

天字天蝎

任务三-三栏布局

公告