给你个参考
<html>
<head>
<style>
h1{
font-size:40px
text-align:center
}
#page{
width:300px
height:500px
margin:0 auto
}
#header{
border: 1px red dashed
width:100%
height:80px
background: #FDFDFD
}
#content{
border: 1px red dashed
background: #FFFADD
width:100%
height:300px
margin:0 auto
}
#left{
border: 1px red dashed
width:80px
height:100%
float:left
}
#right{
border: 1px red dashed
height:100%
width:200px
float:right
}
#footer{
border-style:dashed
width:100%
height:80px
background: #FDFDFD
border: 1px red dashed
}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="content">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
<div id="footer"><h1>footer</h1></div>
</div>
</body>
</html>
效果如下：你参考着慢慢写吧
在网页里面，这样的排版恐怕没有很直接的很好的方式。任何一种对齐方式都不能满足你的要求
个人估计，只能用js来动态排版，设定每块的坐标，我只想到这个方案是可行的。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）