老师，我这里加了浮动，后图片怎么没有显示全部？

登录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>临摹</title>
<style>
* {
margin: 0;
padding: 0;
font-family: "微软雅黑", "黑体";
}
.box {
height: 1045px;
background-position: center center;
background-repeat: no-repeat;
background-size: auto 1045px;
}
.box1 {
background-image: url(image/1.jpg);
background-position: 50% 50%;
}
.box2 {
background-image: url(image/2.jpg);
background-position: 50% bottom;
}
.l{ float:left;}
.r{ float:left;}
.box3 .out {
height:350px;
background: no-repeat url(image/3.1.jpg);
background-size:70%;
}
.box3 .out1{ height:350px;
   background: no-repeat url(image/3.2.jpg);
   background-size:70%;}
</style>
</head>

<body>
<div class="box box1">
  <div class="subtirle"> 红米5 / 红米5 Plus</div>
  <h2>千元全面屏</h2>
  <p>¥799起</p>
</div>
<div class="box box2">
  <div class="subtirle">新一代手机屏幕标准</div>
  <h2>18:9 全面屏</h2>
  <p>定制 5.99" 大屏，圆角屏幕设计，圆润、优雅，<br/>
与机身设计相得益彰，屏幕点亮瞬间绚丽夺目。</p>
</div>
<div class="box box3">
  <h2>玩游戏<br/>
视野更广，先发制胜</h2>
  <p>比 16:9 的手机显示区域更多，提前发现敌人位置，助你一击制胜。</p>
  <div class="l"><div class="out"></div><p>16:9 屏幕比例 5.5" 传统手机</p></div>
  <div class="r"><div class="out1"> </div><p>18:9 屏幕比例 5.99" 红米5 Pl</p>us</div>
</div>
<div class="box box4">
  <div class="subtirle"></div>
  <h2></h2>
  <p></p>
</div>
<div class="box box5">
  <div class="subtirle"></div>
  <h2></h2>
  <p></p>
</div>
<div class="box box6">
  <div class="subtirle"></div>
  <h2></h2>
  <p></p>
</div>
<div class="box box7">
  <div class="subtirle"></div>
  <h2></h2>
  <p></p>
</div>
<div class="box box8">
  <div class="subtirle"></div>
  <h2></h2>
  <p></p>
</div>
<div class="box box9">
  <div class="subtirle"></div>
  <h2></h2>
  <p></p>
</div>
</body>
</html>

lori棒棒糖 · 发表于 2018-2-11 16:01:04

亲~你使用的是什么版本的浏览器？如果是ie8应该是浏览器兼容的问题~

[提问] 老师，我这里加了浮动，后图片怎么没有显示全部？

本帖子中包含更多资源

共1个回复最后回复于 2018-2-11 16:01

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[提问] 老师，我这里加了浮动，后图片怎么没有显示全部？

本帖子中包含更多资源

共1个回复 最后回复于 2018-2-11 16:01

共1个回复最后回复于 2018-2-11 16:01