搜尋

首頁  >  問答  >  主體

css3 - css怎么实现图片环绕的效果


让标号1的一组图片环绕标号2的这张图片

<p>
        /*让他们环绕我*/
        <p>
            <img src="http://www.gbtags.com/gb/laitu/400x200&text=可爱的小周周/dd4814/ffffff" />
        </p>
        /*环绕他去*/
        <p>
            <img src="http://www.gbtags.com/gb/laitu/400x200&text=叫/dd4814/ffffff" />
        </p>
        <p>
            <img src="http://www.gbtags.com/gb/laitu/400x200&text=我/dd4814/ffffff" />
        </p>
        <p>
            <img src="http://www.gbtags.com/gb/laitu/400x200&text=小/dd4814/ffffff" />
        </p>
        <p>
            <img src="http://www.gbtags.com/gb/laitu/400x200&text=周/dd4814/ffffff" />
        </p>
        <p>
            <img src="http://www.gbtags.com/gb/laitu/400x200&text=周/dd4814/ffffff" />
        </p>
    </p>

大神帮帮忙,谢谢啦^_^!

PHPzPHPz2769 天前562

全部回覆(7)我來回復

  • PHPz

    PHPz2017-04-17 11:38:33

    大圖用float,小圖用margin——Css裡用nth-child()控制不同小圖的位置。
    示範:
    http://codepen.io/tjcccc/pen/bpKLwj

    回覆
    0
  • 巴扎黑

    巴扎黑2017-04-17 11:38:33

    使用3*3的tabel,合併儲存格,不就行了

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:38:33

    這個效果 不應該 描述成 圖片環繞的。 。 。 。 。

    只是很常見的 柵格佈局 ~~~

    jd tb 各種這種佈局

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 11:38:33

    不知道你的這個具體需求是啥,圖片是否固定寬高,外層是否固定寬高。
    這種其實就是簡單的float佈局就可以做了

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:38:33

    真的是環繞麼 環繞佈局雖然可能做到但是真沒見過這麼做的
    按豎排編組或者按橫排編組都可以

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:38:33

    使用浮動,高度控制好,就能環繞了

    回覆
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:38:33

    p+CSS中的2+1版面

    回覆
    0
  • 取消回覆