<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header{
height: 50px;
width: 100%;
background-color: red;
text-align: center;
border: 1px black solid;
}
.footer{
height: 50px;
width: 100%;
background-color: yellow;
text-align: center;
border: 1px black solid;
}
.centent{
padding: 0 200px ;
height: 400px;
width: 100%;
background-color: greenyellow;
border: 1px black solid;
}
.left{
margin-left: -100%;
width: 200px;
background-color: pink;
float: left;
/* position: relative;
left: 200px; */
}
.right{
margin-left: -200px;
width: 200px;
background-color: peru;
float: left;
/* position: relative;
right: 200px; */
}
.midddle{
background-color: powderblue;
/*使其浮动 让他不是块元素 方便使用margin-left上去*/
/*因为设置浮动后其他元素可以上去
实际上middle和left是合在一起的 (因为显示效果)
所以把left向左浮动100% 也就是 margin-left:-100%;
*/
float: left;
/*但是因为脱离文档流 所以宽度由内容撑开 所以指定一个宽度*/
width: 100%;
}
.clearfix:after{
content: ;
clear: both;
display: table;
}
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="centent clearfix">
<div class="midddle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
圣杯布局添加padding:0 200px; 显示效果不太对
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- 崽崽的谷雨 2021-10-11 09:44关注
你把 width 100%去掉 。 你给了100%又加 padding 当然会这样
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 多电路系统共用电源的串扰问题
- ¥15 slam rangenet++配置
- ¥15 有没有研究水声通信方面的帮我改俩matlab代码
- ¥15 对于相关问题的求解与代码
- ¥15 ubuntu子系统密码忘记
- ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
- ¥15 保护模式-系统加载-段寄存器
- ¥15 电脑桌面设定一个区域禁止鼠标操作
- ¥15 求NPF226060磁芯的详细资料
- ¥15 使用R语言marginaleffects包进行边际效应图绘制