麻烦老师帮忙看下代码，还有就是页面缩小布局就会变乱 这应该怎么调整
来源：2-14 编程练习
程序员小张
2020-04-07 16:14:49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.container{
width: 80%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -540px;
margin-top: -187px;
}
.one{
background-color:powderblue;
text-align: center;
}
.one img{
margin: 10px 40px 10px 40px;
}
.two{
background-color: pink;
text-align: center;
}
.two img{
margin: 40px 60px 30px 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="one">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg">
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg">
</div>
<div class="two">
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg">
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg">
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg">
</div>
</div>
</body>
</html>
1回答
-
同学你好，关于同学的问题解答如下：
1、整体没有水平居中显示，并且超出屏幕了
建议参考：
缩小页面会乱是因为宽度设置的80%会自适应窗口大小，但是图片没有设置自适应，所以会按照原始大小显示，就会出现排版错乱，目前阶段设置固定宽度即可，后面会学习响应式布局。学习了响应式布局即可解决页面自适应窗口大小的问题。
如果我的回答帮助了你，希望采纳，祝学习愉快！
0
相似问题
回答 2