圖片未占用100％的div？

Question

我正在嘗試創建一個段落，在該段落旁邊是從數據庫表中隨機生成的圖像。 主容器稱為“ .container”，其中包含每個元素。 .container設置為寬度：90％。 段落（.header）向左浮動，寬度為70％。 生成的圖像（.recommend）向右浮動，寬度為30％。 一切工作正常，但是唯一的問題是，當我將圖像設置為占據.recommend div的整個空間（寬度：100％）時，它卻沒有做到這一點。 而是，圖像的寬度為30％。 如何使圖像占據.recommend div的整個空間？

<!DOCTYPE html>
    <html>

<head><link type="text/css" rel="stylesheet" href="/science/template.css"></head>

<body>
    <div class="container">

    <div class="header">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="recommend">
<?php
                    $numArray = array();

                    for ($i = 1; $i <=10; $i++)
                    {
                        $numArray[$i] = $i;
                    }

                    shuffle($numArray);

                    $resultSet = $db->query("SELECT * FROM table");

                    if ($resultSet->num_rows != 0)
                    {
                        while ($rows = $resultSet->fetch_assoc())
                        {
                            $id = $rows["id"];
                            $image1 = $rows["image1"];
                            $image2 = $rows["image2"];
                            $image3 = $rows["image3"];

                            $title = $rows["title"];
                            $title2 = $rows["title2"];
                            $title3 = $rows["title3"];

                           echo "<div class=row>";
                            if ($id == $numArray[0])
                            {
                                echo "<div class=col-md-4 id=left><img src=$image1><p>$title</p></div>";
                            }

                            if ($id == $numArray[1])
                            {
                                echo "<div class=col-md-4 id=left><img src=$image1><p>$title</p></div>";
                            }

                            if ($id == $numArray[2])
                            {
                                echo "<div class=col-md-4 id=left><img src=$image1><p>$title</p></div>";
                            }
                           echo "</div>";
                        }
                    }
                ?>
                </div>
        </div>
    </body>
</html>

的CSS

.container{
    background--color: green;
    width: 90%;
    height: auto;
}

.header{
    background-color: blue;
    float: left;
    width: 70%;
}

.recommend{ 
    background-color: red;
    width: 30%;
    float: right;
}

.recommend img{
    width: 100%;
}

Answer 1

看到渲染的HTML比生成HTML的PHP更有用。
圖像采用了包含div的整個寬度- 設置為30％width 。 此標記： <div class=col-md-4 id=left>使用的是Bootstrap網格類。 並且， col-md-4告訴div是父級寬度的4/12（或30％）。 由於父級為.recommend ，因此div為30％，並且內部圖像為THAT的100％（這意味着它為.recommend div的30％）

因此，您可以從div中刪除col-md-4類，也可以嘗試以其他方式解決它。

Answer 2

根據提供的CSS， .recommend div設置為width:30%所有width:100%的子元素（圖像）僅占用.recommend div的空間，后者為30%

圖片未占用100％的div？

問題描述

2 個解決方案

解決方案1
2 已采納 2016-01-15 02:57:52

解決方案2
0 2016-01-15 02:57:44

圖片未占用100％的div？

問題描述

2 個解決方案

解決方案1 2 已采納 2016-01-15 02:57:52

解決方案2 0 2016-01-15 02:57:44

解決方案1
2 已采納 2016-01-15 02:57:52

解決方案2
0 2016-01-15 02:57:44