请问一下，我写的页面一打开检查器图片就会被挤下去是为什么

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>5-4编程练习</title>
<style type="text/css">
html,body{
margin: 0 auto;
height: 100%;
}
#d1{
height: 70%;
width: 100%;
background-color: lightblue;
}
#d2{
height: 30%;
width: 100%;
background-color: lightcoral;
}
#img1{
float: left;
margin-left: 150px;
margin-top: 150px;
}
#img2{
float: left;
margin-left: 170px;
margin-top: 150px;
}
.small_p{
float: left;  
            margin-left: 150px;  
            margin-top: 80px;
}
</style>
</head>
<body>
<div id="d1">
<img id="img1" src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg">
<img id="img2" src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg">
</div>
<div id="d2">
<img class="small_p" src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg">
<img class="small_p" src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg">
<img class="small_p" src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg">
</div>
</body>
</html>

ggplot2 2018-09-06

源自：CSS入门 5-4 编程练习

收起

3回答

提问者 ggplot2 2018-09-07 16:31:26

哦哦，原来是这样...

可是我看别的同学写出来的网页打开控制器后上边的图片也没被挤下去啊。

就像这样：

要怎样才能让图片乖乖固定在上面呢？

谢谢了。

收起回答

好帮手慕查理 #1

您好，给整个页面一个固定的宽度即可。祝学习愉快！

2018-09-07 17:33:49
提问者 ggplot2 回复好帮手慕查理 #2

就是要指出宽度具体是几像素而不是用百分比形式来表示么？明白了，谢谢。

2018-09-07 22:19:32
imooc_澈回复提问者 ggplot2 #3

是的，你的整体宽度占整个屏幕的百分之百，margin又是固定的，一旦右边的调试工具打开，宽度不够，自然会被挤下去，把总宽度也设成固定宽度，具体根据你自己的页面调，或者都设成百分比。

2018-09-09 11:28:15