如何设置边框刚好包住图片和文字，就像示例中一样呢？
来源：3-4 编程练习
相见甚欢
2018-10-20 18:25:54
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style type="text/css">
html{
margin: opx;
}
body{
margin: 20px;
border: green 1px dashed;
width: 1200px;
padding: 20px;
}
.con{
overflow: hidden;
}
.img1,.img2,.img3,.img4,.img5,.img6{
border: 1px solid lightgray;
width: 30%;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="con">
<div class="line1">
<div class="img1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
欢迎来慕课！
</div>
<div class="img2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
欢迎来慕课！
</div>
<div class="img3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
欢迎来慕课！
</div>
</div>
<div class="line2">
<div class="img4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
欢迎来慕课！
</div>
<div class="img5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
欢迎来慕课！
</div>
<div class="img6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
欢迎来慕课！
</div>
</div>
</div>
</body>
</html>
问题：
1 如何设置边框刚好包住图片和文字，就像示例中一样呢？
2 麻烦助教老师看看代码有什么其他错误和需要改善的地方没？
感谢~
1回答
-
您好，1.设置宽度为240px即可，或者按照240px设置为百分比形式.img1,.img2,.img3,.img4,.img5,.img6{ width:240px; }。
2.html标签的margin: opx;应该是margin: 0px;。
3.相同部分的样式可以设置相同的class名称，例如.img1,.img2,.img3,.img4,.img5,.img6可以全部设置为img。
祝学习愉快！
0
相似问题
回答 1
回答 1