div中的圖片跑出來

本文轉載自查看原文 2019-12-22 20:37 1041 css布局

一：div中的圖片跑出來

    <style>
    
    /* 圖片在一行 */
    #div1 li{
        float: left;
        list-style: none;
    }
    </style>

</head>
<body>
        <div id="div1">
                <ul>
                    <li><img src="pic/美女1.jpg" alt=""></li>
                    <li><img src="pic/美女2.jpg" alt=""></li>
                    <li><img src="pic/美女3.jpg" alt=""></li>
                    <li><img src="pic/美女4.jpg" alt=""></li>
                    <li><img src="pic/美女5.jpg" alt=""></li>
                    <li><img src="pic/美女6.jpg" alt=""></li>
                    <li><img src="pic/美女7.jpg" alt=""></li>
                </ul>
        </div>
</body>
</html>

圖片的寬高都是200px，然后給div加上邊框

  <style>
    #div1 {
        border: 1px solid red;
        width: 1402px;
        height: 202px;
    }
    /* 圖片在一行 */
    #div1 li{
        float: left;
        list-style: none;
    }
    </style>

</head>
<body>
        <div id="div1">
                <ul>
                    <li><img src="pic/美女1.jpg" alt=""></li>
                    <li><img src="pic/美女2.jpg" alt=""></li>
                    <li><img src="pic/美女3.jpg" alt=""></li>
                    <li><img src="pic/美女4.jpg" alt=""></li>
                    <li><img src="pic/美女5.jpg" alt=""></li>
                    <li><img src="pic/美女6.jpg" alt=""></li>
                    <li><img src="pic/美女7.jpg" alt=""></li>
                </ul>
        </div>
</body>
</html>

嘗試給ul加上margin屬性

    <style>
    #div1 {
        border: 1px solid red;
        width: 1402px;
        height: 202px;
    }
    /* 圖片在一行 */
    #div1 li{
        float: left;
        list-style: none;
    }
    #div1 ul{
        margin-left: 0px;  # 解決了上面，左邊依然沒有解決
        margin-top: 0px;
    }
    </style>

</head>
<body>
        <div id="div1">
                <ul>
                    <li><img src="pic/美女1.jpg" alt=""></li>
                    <li><img src="pic/美女2.jpg" alt=""></li>
                    <li><img src="pic/美女3.jpg" alt=""></li>
                    <li><img src="pic/美女4.jpg" alt=""></li>
                    <li><img src="pic/美女5.jpg" alt=""></li>
                    <li><img src="pic/美女6.jpg" alt=""></li>
                    <li><img src="pic/美女7.jpg" alt=""></li>
                </ul>
        </div>
</body>
</html>

原因：pading的原因，左邊有距離，把最后一張照片擠下去了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>div中圖片問題</title>

    <style>
    #div1 {
        border: 1px solid red;
        width: 1400px;
        height: 200px;
    }
    /* 圖片在一行 */
    #div1 li{
        float: left;
        list-style: none;
    }
    #div1 ul{
        /* margin 就是ul和同級或者父級模塊之間的距離 */
        margin: 0;
        /* 當div設置了寬度后，float上層標簽要，置寬度，是為了讓圖片一行， */
        width: 1400px; # 當設置了padding=0后，可以不設置寬度
        height: 200px;
        /* 這個東西導致左邊一直有空缺  padding就是 ul里面的內容與ul邊框的距離*/
        padding: 0; # ul里面填充的內容，也就是li,li距離ul的外邊框的距離，默認不是0，因此要自己調整
    }
    </style>

</head>
<body>
        <div id="div1">
                <ul>
                    <li><img src="pic/美女1.jpg" alt=""></li>
                    <li><img src="pic/美女2.jpg" alt=""></li>
                    <li><img src="pic/美女3.jpg" alt=""></li>
                    <li><img src="pic/美女4.jpg" alt=""></li>
                    <li><img src="pic/美女5.jpg" alt=""></li>
                    <li><img src="pic/美女6.jpg" alt=""></li>
                    <li><img src="pic/美女7.jpg" alt=""></li>
                </ul>
        </div>
</body>
</html>

# TODO

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何讓div中的img圖片顯示在div下面。 div容器中img圖片居中-html在div中如何將圖片居中-img在div中垂直居中讓一個圖片在div中居中（四種方法）讓一個圖片在div中居中（四種方法） div下的img標簽中圖片的大小設定 css實現div中圖片高度自適應並與父級div寬度一致 vue div轉圖片 img圖片占不滿整個div div 圖片垂直居中 div中圖片和文字同一行實現垂直居中