Question

我正在尝试创建一个段落，该段落旁边是从数据库表中随机生成的图像。主容器被称为＆＃34; .container＆＃34;这包括每个元素。 .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％宽度。此标记：<div class=col-md-4 id=left>正在使用Bootstrap grid class。并且，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%

图片没有占用div的100％？

2 个答案: