混合布局 2-13 编程练习
我上半部分。使用的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://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" />
<img class="right" src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg" />
</div>
</div>
<div class="bottom">
<div class="bottom_center">
<img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg" />
<img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg" />
<img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg" />
</div>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
你好，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？是指左右都设置了,导致设置的多了么？如果是这个，可以参考如上代码，给其一边设置即可，若不是，建议：可以详细的描述下，便于大家测试与解决问题。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星