老师，麻烦看看有没有问题
来源：2-7 编程练习
慕前端2185815
2020-08-07 21:47:09
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
.header{
width:100%;
margin:0 auto;
/*background:gray;*/
text-align:center;
padding-bottom:10px;
padding-top:30px;
font-size:30px;
font-weight:bold;
}
.content{
width:100%;
}
.content .con{
width:48%;
float:left;
text-align:center;
margin:10px 10px 10px 0;
}
.content .con img{
width:493px;
height:250px;
}
.content .con .des{
font-size:20px;
padding-top:5px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
ENJOY THE LIFE
</div>
<div class="content">
<div class="con">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
<div class="des">
Life is like a book Life is like a book Life is like a book Life is like a book Life is like a book Life is like a book</div>
</div>
<div class="con">
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
<div class="des">
Life is like a book Life is like a book Life is like a book Life is like a book Life is like a book Life is like a book</div>
</div>
</div>
</body>
</html>
3回答
-
同学你好，测试代码时老师加了一个背景色，可以看到右侧还有间隙
建议右侧的设置右浮动，并且去掉右边距。下面的文字是左对齐显示的，不需要设置居中。参考修改
优化：为了美观一些，建议将content盒子设置为固定宽度，然后居中
祝学习愉快！
0 -
慕前端2185815
提问者
2020-08-07
看下面回复里面的代码有无问题就可以
0 -
慕前端2185815
提问者
2020-08-07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
.header{
width:100%;
margin:0 auto;
/*background:gray;*/
text-align:center;
padding-bottom:10px;
padding-top:30px;
font-size:30px;
font-weight:bold;
}
.content{
width:100%;
}
.content .con{
width:48%;
float:left;
text-align:center;
margin:10px 10px 10px 0;
}
.content .con img{
width:100%;
height:250px;
}
.content .con .des{
font-size:20px;
padding-top:5px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
ENJOY THE LIFE
</div>
<div class="content">
<div class="con">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg">
<div class="des">
Life is like a book Life is like a book Life is like a book Life is like a book Life is like a book Life is like a book</div>
</div>
<div class="con">
<img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg">
<div class="des">
Life is like a book Life is like a book Life is like a book Life is like a book Life is like a book Life is like a book</div>
</div>
</div>
</body>
</html>
0
相似问题