首页 > 代码库 > 圣杯布局
圣杯布局
<margin>外边距<padding>内边距
<width>宽度<height>高度
<top>上<bottom>下<left>左<right>右
<position>位置<relative>相对<absolute>绝对<fixed>固定<float>浮动
<background>背景
《圣杯布局》
<!doctype html><html><head><title>圣杯布局</title><style>.zj{min-height:200px;margin:0 150px 0 300px;}.zhong,.you,.zuo{min-height:200px;float:left;position:relative;}.zhong{width:100%;min-height:200px;background:#ff0000;}.zuo {width: 300px;min-height: 200px;background: #0026ff;margin-left:-100%;position:relative;left:-300px;}.you{width:150px;min-height:200px;background:#00ff21;margin-left:-150px;position:relative;left:150px;}</style></head><body><div class="zj"><div class="zhong">中</div><div class="zuo">左</div><div class="you">右</div></div></body></html>效果图：
圣杯布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。