混合布局 2-13 编程练习
来源：2-13 混合布局
写额外飞1
2018-01-11 23:22:41
我上半部分。使用的position：absolue定位写的。
下半部分。计算后，调试。又给图片外面加了一个div，设置了一下margin-left属性。
问题一：更简洁的代码应该怎样。
问题二：图片的宽度和高度，我都知道。但是计算后，图片和图片之间的距离。会重复设置padding。怎么解决。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
body{
margin:0;
padding:0;
}
.container{
width:1000px;
height:500px;
background:black;
position:absolute;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-500px;
}
.top{
width:1000px;
height:300px;
background:#00ffff;
position:relative;
}
.top_center{
width:810px;
height:215px;
position:absolute;
left:50%;
top:50%;
margin-top:-107px;
margin-left:-407px;
}
.right{
float:right;
}
.bottom{
width:1000px;
height:200px;
background:#ffc1e0;
}
.bottom img{
padding:70px 50px;
}
.bottom_center{
margin-left:50px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="top">
<div class="top_center">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg" />
<img class="right" src="http://climg.mukewang.com/58c0f819000198a703600214.jpg" />
</div>
</div>
<div class="bottom">
<div class="bottom_center">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg" />
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg" />
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg" />
</div>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕糖
2018-01-12
你好，1、可以不使用定位的，以上部分为例，可参考下列代码：
*{ margin: 0; padding: 0; } .container { width: 900px; height: 500px; background: black; position: absolute; left: 50%; top: 50%; margin-top: -250px; margin-left: -500px; } .top { width: 900px; height: 300px; background: #00ffff; } .top img{ margin-top: 43px; margin-left: 60px; }2、重复设置padding？是指左右都设置了,导致设置的多了么？如果是这个，可以参考如上代码，给其一边设置即可，若不是，建议：可以详细的描述下，便于大家测试与解决问题。
祝学习愉快~
0
相似问题