为什么缩小网页左右两边会消失呢

为什么缩小网页左右两边会消失呢

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

 <style type="text/css">

 *{margin:0;padding: 0;}

 body{min-width: 900px;}

.header,.footer{background:   #272727;width: 100%;height: 100px;float: left;}

.content{padding: 0 420px 0 400px;}

.conter,.left,.right{position: relative;min-height: 700px;float: left;}

.conter{width: 100%;background: #00CACA;}

.left{width:400px;background: red;left:-400px;margin-left: -100%}

.right{width:420px;background:#C6A300;margin-left: -420px;right: -420px;}


 </style>

</head>

<body>

<div class="header"></div>

<div class="content">

  <div class="conter"> 5464646</div>

  <div class="left">6+6</div>

  <div class="right">4</div>

</div>

<div class="footer"></div>


  

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕码 2020-09-17 17:29:36

同学你好,不是消失,而是由于宽度不够导致位置下落:

http://img1.sycdn.imooc.com//climg/5f632bc909b6afdd10820967.jpg

原因是:给body设置的最小宽度太小了。圣杯布局里存在这个一个最小宽度,即2x+y,意思是最小的宽度临界值为两个左边块的宽度和一个右边块的宽度。(记住这个公式就可以,不需要考虑是怎么计算出来的,是根据经验总结出来的。圣杯布局不是很常用,了解一下即可。)

那么左边是400px,右边420,那么最小宽度要大于 400+420*2,即1240px 。例如:

http://img1.sycdn.imooc.com//climg/5f632c780992bb9302320081.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师