CSS三栏式布局

来源：互联网发布：mac os 升级版本编辑：程序博客网时间：2024/05/16 18:22

任务目标

掌握HTML/CSS布局的概念
掌握盒模型的概念
掌握position与float的概念以及在布局时的用法

任务介绍为：http://ife.baidu.com/task/detail?taskId=3

[demo] https://happyshj.github.io/mygit-test_ife-task_03/task_03.html

HTML代码为：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link type="text/css" rel="stylesheet" href="task_03.css">    <title>task_03</title></head><body>     <div class="div1">         <div class="left">             <img class="last" src="03.jpg" alt="美图" />             <p>团队名称</p>         </div>         <div class="right">             <img src="03.jpg" alt="美图" />             <img src="03.jpg" alt="美图" />             <img src="03.jpg" alt="美图" />             <img class="last" src="03.jpg" alt="美图" />         </div>         <div class="mid">             <p>                 任务描述                 使用 HTML 与 CSS 按照 示例图（点击查看） 实现三栏式布局。                 左右两栏宽度固定，中间一栏根据父元素宽度填充满，最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高的高度。                 任务注意事项                 尝试 position 和 float 的效果，思考它们的异同和应用场景。                 注意测试不同情况，尤其是极端情况下的效果。                 图片和文字内容请自行替换，尽可能体现团队的特色。                 调节浏览器宽度，固定宽度和自适应宽度的效果始终符合预期。                 改变中间一栏的内容长度，以确保在中间一栏较高和右边一栏较高时，父元素的高度始终为子元素中最高的高度。                 其他效果图中给出的标识均被正确地实现。                 任务协作建议                 团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致                 各自完成任务实践                 交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码                 相互讨论，最后合成一份组内最佳代码进行提交             </p>         </div>     </div></body></html>

CSS代码为：

/*{    margin: 0px;    padding: 0px;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}.div1{    background-color: #EEEEEE;    border: 1px solid #999999;    height: 100%;    margin: 20px;    padding: 20px;    overflow: auto;}.left{    background-color: white;    padding: 20px;    border: 1px solid #999999;    width: 200px;    float: left;}.left img{    width: 80px;    height: 80px;    border: 1px solid #999999;    float: left;}.left p{    font-weight: bold;    text-align: center;    width: 180px;}.mid{    background-color: white;    border: 1px solid #999999;    padding: 20px;    margin: 0 140px 0 220px;}.right{    background-color: white;    border: 1px solid #999999;    padding: 20px;    width: 120px;    float: right;}.right img{    border: 1px solid #999999;    width: 80px;    height: 80px;    margin-bottom: 20px;}*/*{    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;}html, body, div{    margin: 0;    padding: 0;}.div1{    background-color: #eeeeee;    margin: 20px;    padding: 20px;    border: 1px solid #999;    overflow: auto;    min-width: 500px;}.left,.mid,.right{    background-color: white;    border: 1px solid #999999;    padding: 20px;}img{    width: 80px;    height: 80px;    border: 1px solid #999999;    margin-right: 20px;    margin-bottom: 20px;}.left{    float: left;    width: 200px;}.left img{    float: left;}.left p{    font-weight: bold;    margin-top: 0px;    font-size: 14px;}.mid{    margin: 0 140px 0 220px;}.right{    float: right;    width: 120px;}.last{    margin-bottom: 0px;}

图片为：

0 0