3-2练习，帮忙看下要改进的地方
来源：3-1 实战分析
蜀山有雨
2017-09-27 00:41:05
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{
margin: 0px;
padding:0px;
}
.big{
border: 1px dashed #D3D3D3;
width: 600px;
}
img{
height:100px;
}
.one, .two, .three, .four, .five, .six{
float:left;
margin: 10px;
border: 1px solid #D3D3D3;
}
p{
text-align: center;
}
.big:after{
content:'';
width:0px;
height: 0px;
line-height: 0px;
display: block;
clear:both;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="big">
<div class="one">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
<div class="two">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
<div class="three">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
<div class="four">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div >
<div class="five">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
<div class="six">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
</div>
</body>
</html>
1回答
-
怎么都被占用了呢
2017-09-27
<!DOCTYPE html>
<html>
<head>
<!-- 此处编写样式 -->
<style>
*{
margin: 0px;
padding:0px;
}
.big{
border: 1px dashed #D3D3D3;
width: 786px;
padding:10px;
margin:0 auto;
overflow: hidden;
}
.big>div{
float:left;
margin: 10px;
border: 1px solid #D3D3D3;
text-align: center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="big">
<div class="one">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
<div class="two">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
<div class="three">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
<div class="four">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div >
<div class="five">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
<div class="six">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>哈哈哈哈哈哈</p>
</div>
</div>
</body>
</html>
786=3张图片的宽度+3张图片的左右边框+3张图片的左右边距
0
相似问题