<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 用lstm来预测股票价格
- ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
- ¥170 如图所示配置eNSP
- ¥20 docker里部署springboot项目,访问不到扬声器
- ¥15 netty整合springboot之后自动重连失效
- ¥15 悬赏!微信开发者工具报错,求帮改
- ¥20 wireshark抓不到vlan
- ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
- ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
- ¥15 stata安慰剂检验作图但是真实值不出现在图上