<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .d1{ background-color: red; overflow: hidden; /*ie比较低版本的浏览器中,加上 zoom:1;*/ zoom:1; } .d1_1{ background-color: red; } .left{ background-color: yellow; width: 100px; height: 50px; float: left; } .right{ float: right; width: 100px; height: 80px; background-color: green; } .d2{ background-color: black; width: 100%; height: 10px; }</style>
</head><body> <div style="width:200px;height:20px;margin-top:0px;">问题重现：</div> <div class="d1_1"> <div class="left"></div> <div class="right"> </div> </div> <div class="d2"></div> <div style="width:200px;height:20px;margin-top:100px;">问题解决：</div> <div class="d1"> <div class="left"></div> <div class="right"> </div> </div> <div class="d2"></div><div style="width:100px;height:100px;border:1px solid black;margin-top:10px;overflow:hidden">问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：问题所在：</div>
<div style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:100px; border:1px solid black; margin-top:10px;"> 用法2：隐藏文字 </div><div style="margin-top:10px;">问题所在：div的高度比图片高出一点点</div>
<div style="background-color:red;overflow:hidden;"> <img src="6.png" alt=""> </div> <div style="margin-top:10px;">问题解决1：设置div高宽与图片一样，添加：overflow:hidden</div> <div style="background-color:red;overflow:hidden;height:150px;width:200px;margin-top:10px;"> <img src="6.png" alt=""> </div> <div style="margin-top:10px;">问题解决2：图片添加样式：display:block</div> <div style="background-color:red;margin-top:10px;"> <img src="6.png" style="display:block"> </div></body></html>