让标号1/2/3/4/5的一组图片环绕标号0的这张图片
2 回答
已采纳
qq_青枣工作室_0
TA贡献446条经验 获得超754个赞
<!DOCTYPE html>
<style>
*{margin: 0; padding: 0}
.box{ width: 330px; overflow: hidden}
.img{
float: right;
width: 100px;
height: 50px;
margin: 0 10px 10px 0;
background-color: #eee;
}
.img:first-child{
float: left;
width: 210px;
height: 110px
}
</style>
<div class="box">
<div class="img">0</div>
<div class="img">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
<div class="img">5</div>
</div>我用div给你做个演示，你改为图片即可。
竹马君
TA贡献64条经验 获得超115个赞
大图用float，小图用margin——Css里用nth-child()控制不同小图的位置。
HTML部分
<div class="rect-group"> <div class="rect big">0</div> <div class="small-group"> <div class="rect small">1</div> <div class="rect small">2</div> <div class="rect small">3</div> <div class="rect small">4</div> <div class="rect small">5</div> </div> </div>
css部分
.rect-group {
width: 320px;
height: 160x;
background: #efefef;
}
.rect {
background: #ccc;
}
.big {
float: left;
width: 210px;
height: 110px;
}
.small {
width: 100px;
height: 50px;
}
.small:first-child {
margin: 0 0 0 220px;
}
.small:nth-child(2) {
margin: 10px 0 0 220px;
}
.small:nth-child(3) {
margin: 10px 0 0 220px;
}
.small:nth-child(4) {
margin: -50px 0 0 110px;
}
.small:last-child {
margin: -50px 0 0 0;
}
添加回答
举报
0/150
提交
取消