Question

我有一个主要的Div，它是＆＃34;主人＆＃34;所有的div。这个div的宽度是页面的70％。在这个div里面，是另一个包含图像的div。这个div叫做mainImg。它被设置为绝对定位，所有其余元素也被设置为绝对。所有这些元素都相对于主要的div移动。

这是我的代码：

PHP / HTML

<?php
    $resultSet = $db->query("SELECT * FROM Articles");

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


            if ($id <= 3)
            {
                $images = $rows["image"];
                $title = $rows["title"];
                echo "<div id=main>";
                if ($id == 1)
                {

                    echo "<div id=mainImg>";
                    echo "<img src=$images>";
                    echo "<div id=mainTitle>";
                    echo "<h2>$title</h2>";
                    echo "</div>";
                    echo "</div>";

                }
               echo "</div>";
           }
     }
}?>

CSS

body{
    position: relative;
}

#main{
    position: relative;
    width: 70%;
    height: auto;
    margin: 1.5% auto;
}

#mainImg{
    position: absolute;
    width: 65%;
}

#mainImg img{
    width: 100%;
}

#mainTitle{
    position: absolute;
    width: 100%;
    height: 25%;
    bottom: 0%;
    background-color: rgba(100, 0, 0, 0.7);
}

#mainTitle h2{
    color: white;
    text-align: center;
    font-family: sans-serif;
    font-size: 120%;
}

我遇到的问题是mainImg（mainTitle）中的div没有在图像中正确装配。 div是一个半透明的块，应该完美地放在图像的底部，高度为25％。相反，该块稍微出现了图像。我面临的另一个问题是我在mainTitle div中的文字。文本居中，但未在div的中间对齐。我试图使文本响应，百分比，但每当我调整大小时，文本总是低于div。我该如何解决这三个问题？（正确装配div，对齐文本，并将文本始终保持在div中以适应其他窗口大小？

半透明div正在离开图像的边缘

调整浏览器大小时，文本会发生这种情况

Answer 1

<?php
    $res = $db->query("SELECT * FROM Articles");

    if( $res->num_rows > 0 ) {

        echo "<div id='main'>";/* Open main div outside the loop */

        while( $rows = $res->fetch_object() ) {
            $id = $rows->id;

            if ( $id <= 3 ) {

                $image = $rows->image;
                $title = $rows->title;

                if ( $id == 1 ) {
                    echo "
                    <div id='mainImg'>
                        <img src='$image'>
                        <div id='mainTitle'>
                            <h2>$title</h2>
                        </div>
                    </div>";
                }
            }
        }
        echo '</div>';/* close main div */
    }

?>

Div没有绑定到图像上，文本没有正确居中？

1 个答案: