双飞翼布局
请问一下，双飞翼布局我想给中间部分加一个最小的宽度（700px），但是我发现左右两边都被两翼的内容给重叠覆盖了，那需要怎样实现中间部分的内容最小宽度为700px呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
min-height:700px;
}
.header,.footer{
background-color:grey;
width:100%;
float:left;
height:100px;
line-height:100px;
text-align:center;
}
.main,.sub,.extra{
float:left;
min-height:700px;
}
.main{
width:100%;
}
.main-inner{
background:blue;
margin-left:220px;
margin-right:200px;
min-height:700px;
min-width:700px;
}
.sub{
width:220px;
background:red;
margin-left:-100%;
}
.extra{
width:200px;
background:orange;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="header">页头</div>
<div class="main">
<div class="main-inner">这是主页面内容这是主页面内容这是主页面内容这是主页面内容这是主页面内容这是主页面内容这是主页面内容这是主页面内容</div>
</div>
<div class="sub">这是左侧</div>
<div class="extra">这是右侧</div>
<div class="footer">页脚</div>
</body>
</html>1
收起
正在回答
1回答
同学你好， 双飞翼布局主要实现效果就是：左右侧宽度，中间宽度自适应。 这里不需要为中间设置最小宽度
同学可以尝试给body这只min-width，保证改变浏览宽度缩小时，页面的布局不发生改变， 示例：
这节课程也已经标注了为选修课程，同学了解即可
如果帮助到了你 欢迎采纳
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星