使用css布局优先展示元素,比如京东商城的banner是优先展示,有2种布局方法:圣杯和双飞翼,
圣杯,容器先padding预留左右2个区域,然后优先展示先放,左右后放,浮动布局,left移动
双飞翼,容器只给宽度,优先展示部分100%撑满容器,左右两部分,浮动布局,覆盖上去
圣杯:
<!DOCTYPE html>
<html>
<head>
<style>
#con {
margin: 0 auto;
width: 700px;
height: 300px;
padding-left: 100px;
padding-right: 150px;
background: yellow;
}
#banner {
width: 100%;
height: 300px;
float: left;
background: black;
}
#left {
width: 100px;
height: 300px;
background: red;
float: left;
margin-left: -100%;
position: relative;
left: -100px
}
#right {
width: 150px;
height: 300px;
background: blue;
float: left;
margin-left: -150px;
position: relative;
right: -150px;
}
</style>
</head>
<body>
<div id="con">
<div id="banner">
banner
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>
双飞翼:
<!DOCTYPE html>
<html>
<head>
<style>
#con {
width: 1200px;
margin: 0 auto;
}
#banner {
width: 100%;
height: 300px;
background: black;
float: left;
}
#left {
width: 100px;
height: 300px;
background: red;
float: left;
margin-left: -100%;
}
#right {
width: 150px;
height: 300px;
background: blue;
float: left;
margin-left: -150px;
}
</style>
</head>
<body>
<div id="con">
<div id="banner">
banner
</div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
</body>
</html>