三栏式布局

来源：互联网发布：foreach循环遍历数组编辑：程序博客网时间：2024/06/05 23:05

今天做了一下百度前端的三栏式布局..

真是坑坏我了...

就因为html里left,right,center的位置一直出错

应该是left,right,center我写成了left,center，right

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container {
overflow: auto;
}
.container, .left, .right, .center {
border: 1px solid #999;
padding: 20px;
}
img {
width: 80px;
height: 80px;
border: 1px solid red;
}
.left {
float: left;
width: 180px;
}
.left span {
float: right;
margin-top: 0px;
margin-right: 20px;
}
.right {
float: right;
width: 80px;
padding: 20px;
}
.center {
width: auto;
margin-left: 240px;
margin-right: 140px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<img src="1.jpg" alt="团队logo">
<span>团队名称</span>
</div>
<div class="right">
<div><img src="1.jpg" alt="团队logo"></div>
<div><img src="1.jpg" alt="团队logo"></div>
<div><img src="1.jpg" alt="团队logo"></div>
<div><img src="1.jpg" alt="团队logo"></div>
</div>
<div class="center">
<p>课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。</p>
</div>
</div>
</body>
</html>

0 0