实现三栏式布局(左右两栏定宽,中间宽度自适应)有多种方法
最合适的是 将左边栏与右边栏的css的float属性分别设置为left和right
在html中将浮动元素放在不浮动元素前面,这样浮动元素就会环绕在不浮动元素的两侧。
部分css样式如下
.Left{
padding:20px;
width: 200px;
position:relative;
float: left;
background-color:white;
}
.Right{
width: 120px;
float:right;
position:relative;
background-color:white;
}
.Middle{
margin-left:260px;
margin-right:200px;
background-color:white;
overflow: auto;
}
部分文档结构
<html>
<body>
<div class="content">
<div class="Left">
<p>团队名称</p>
</div>
<div class="Right">
</div>
<div class="Middle">
<h3>百度前端学院</h3>
<p>2016春季班概述</p>
</div>
</div>
</body>
</html>