黑马程序员技术交流社区
标题:
一种三列布局
[打印本页]
作者:
sangwentao
时间:
2016-6-2 20:11
标题:
一种三列布局
这是我曾经面试时遇到的一个问题，在网上查了一下，整理出来跟大家分享效果：左右定宽，中间宽度自适应。
方法：左侧左浮动，右侧右浮动。中间设置margin左右。注意中间的div放在左侧和右侧之后。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应</title>
<style type="text/css">
.left{
float: left;
width: 150px;
border: 1px solid;
}
.center{
width: auto;
margin: 0 140px 0 150px;
border: 1px solid;
}
.right{
float: right;
width: 140px;
border: 1px solid;
}
</style>
</head>
<body>
<div id="container">
<div class="left">左侧定宽100px</div>
<div class="right">右侧定宽100px</div>
<div class="center">中间宽度自适应</div>
</div>
</body>
</html>
作者:
sangwentao
时间:
2016-6-2 20:12
两列布局三列布局是前端中最基本的效果。很考察基本功。
作者:
111111111111
时间:
2016-6-3 15:15
66666666666666666666666666666666666
作者:
归宿123
时间:
2016-6-7 23:49
6666666666
作者:
路子墨
时间:
2016-6-25 13:12
为什么要放在左右之后？新手求指导！
作者:
sangwentao
时间:
2016-6-26 18:32
路子墨 发表于 2016-6-25 13:12
为什么要放在左右之后？新手求指导！
因为center会占去一行，如果ceter放在中间，那么右侧的会被挤掉到下一行。
作者:
南国之南
时间:
2016-6-26 21:06
恩恩，很不错的分享啊，在实践中很有用
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
