麻烦老师纠错,非常感谢!
来源：2-14 编程练习
bao_
2020-01-27 08:11:25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
height: 1000px;
}
.main {
width: 100%;
height: 800px;
}
.Upper_half {
width: 100%;
height: 280px;
background: #00CCFF;
overflow: hidden;
zoom: 1;
}
.Upper_half_left {
width: 50%;
float: left;
text-align: center;
margin-top: 30px;
}
.Upper_half_right {
width: 50%;
float: right;
text-align: center;
margin-top: 30px;
}
.Lower_half {
width: 100%;
height: 110px;
background: pink;
overflow: hidden;
zoom: 1;
}
.Lower_half_left {
width: 33%;
text-align: center;
float: left;
margin-top: 25px;
}
.Lower_half_middle {
width: 33%;
text-align: center;
float: left;
margin-top: 25px;
}
.Lower_half_right {
width: 33%;
text-align: center;
float: left;
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="main">
<div class="Upper_half">
<div class="Upper_half_left">
<img src="http://img1.sycdn.imooc.com\/climg/58c0f808000129a303600215.jpg" />
</div>
<div class="Upper_half_right">
<img src="http://img1.sycdn.imooc.com\/climg/58c0f819000198a703600214.jpg" />
</div>
</div>
<div class="Lower_half">
<div class="Lower_half_left">
<img src="http://img1.sycdn.imooc.com\/climg/58c0f81d0001fe4402000060.jpg" />
</div>
<div class="Lower_half_middle">
<img src="http://img1.sycdn.imooc.com\/climg/58c0f8220001dfce02000060.jpg" />
</div>
<div class="Lower_half_right">
<img src="http://img1.sycdn.imooc.com\/climg/58c0f8780001c74602000060.jpg" />
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
还有我想问一下,我想给类名.Lower_half_left的内容相对于父级元素.Lower_half设置垂直居中,用line-height等于其父级容器的高度怎么没有效果
1回答
-
好帮手慕言
2020-01-29
同学你好，测试同学提供的代码，间距是不一样的，如下：
建议：给最外层盒子设置一个宽度，调整子元素的间距即可，如下：
第一行中大盒子宽度为900，一个图片宽度是360，那么剩余空间均分是（900-360*2）/3=60第一行中大盒子高度为280，一个图片高度是215，那么剩余空间均分是280-215 =65/2=32.5
第二行的思路与上方是一致的，同学可以写一写。
另外：行高一般是给文字设置，给其他元素设置可能会没有效果。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题