css怎么实现图片环绕的效果，求详解
让标号1/2/3/4/5的一组图片环绕标号0的这张图片
怪盗饭团浏览 2765回答 2
2回答
-
qq_青枣工作室_0
<!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给你做个演示，你改为图片即可。 -
竹马君
大图用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; }
随时随地看视频慕课网APP
Html/CSS
Html5
前端工具