Div类定位

Question

我在使页面上的某些元素正确定位时遇到了一些麻烦。正如您在下图中看到的那样，它看起来不太好。我试图让文本在页面的上半部分定位到图像的右侧，将电影海报定位在（z轴）“梯度叠加”的顶部，这样它就不会灰显

HTML（带swig）：

{% if movie.imgUrl.length > 0 %}
<div class="topDivBanner" style="background-image:url({{movie.imgUrl}})">
{% else %}
<div class="topDivBanner" style="background-image:url('blank.png')">
{% endif %}
    <div class="bunnerOverlay">
        <h1>{{movie.title}}</h1>
        <h5>{{movie.year}}</h5>
        <p class="topDivText leftItem" id="movieLength">{{movie.runtime}} minutes</p>
        <p class="topDivText leftItem" id="movieMore">{{movie.genres}}</p>
        <p class="topDivText rightItem" id="movieYT">
            <a onclick="openLink('http://www.youtube.com/results?search_query={{movie.title}}+Trailer')">Trailer<i class="fa fa-youtube"></i></a>
        </p>
        <p class="topDivText rightItem" id="movieIMDB">
            <a onclick="openLink('http://www.imdb.com/title/{{movie.imdbId}}/')">
                IMDb: {{movie.imdbRating}}/10 ({{movie.imdbVotes}} votes)
            </a>
        </p>
        <div class="topDivDes">
            {{movie.plot}}
        </div>
    </div>
</div>

<div class "rlsTable" style="width: 90%">
    <table style="border-spacing:20px">
    {% for release in movie.release %}
     <tr>
        <td><a class="asimple" onclick="openLink('http://www.torrentleech.org{{release.detailsUrl}}')">{{release.rlsDetails}}</a></td>
        <td>{{release.size}}</td>
        <td><i class="fa fa-arrow-up" style="color:green"></i>{{release.seeders}}</td>
        <td><i class="fa fa-arrow-down" style="color:red"></i>{{release.leechers}}</td>
        <td><a class="asimple" onclick="play('{{release.torrentUrl}}')"><i class="fa fa-play-circle"></i>Stream</a></td>
    </tr>
    {% endfor %}
    </table>
<div>

CSS：

.topDiv {
    display: inline-block;
    height: 700px;
    width: 1200px;
    padding: 20px;
    background-color: #EBEBEB;
    color: rgba(27, 27, 27, 0.98);
    overflow: auto;
}

.topDivFree {
    padding: 0px;
}

.topDivBanner {
    width: 100%;
    height: 100%;
    top:0px;
    background-position: top left;
    height: 445px;
    margin-top: -10px;
    background-color: white;
    background-repeat: no-repeat;
}


.bunnerOverlay {
    width: 100%;
    height: 100%;
    background-color: rgba(27, 27, 27,.75);
    color:#EBEBEB;
    position: relative;
}

.topDivText {
    font-weight: normal;
    margin: 10px 30px;
    font-size: 17px;
    line-height: 25px;
    height: 25px;
    width: 300px;
    position: absolute;
    display: inline-block!important;
}

.topDivDes {
    width: 90%;
    margin: 10px auto;
    padding-top: 10px;
    text-align: justify;
    position: relative;
}

.movieOverlayEx {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 90%;
    display: inline-block;
}

.showLeft {
    float:left;
    text-align: left;
}

.showRight {
    float:right;
    text-align: right;
}

虽然我的代码中没有显示，但是带有电影详细信息（HTML描述的）的弹出窗口具有.topDiv和.topDivFree样式。

（此外，其他设计建议表示赞赏）。

Answer 1

将文本div放在灰色的一个div中。 margin-left灰色div调整它以使其不覆盖图像。中心对齐使用（显示：“table”）属性为灰色div和（显示：“cell”）属性为文本div。让我知道它是否适合你。

Answer 2

您可以尝试使用 float 属性。在最简单的用法中， float 属性可用于在图像周围包装文本，即

img{
 float: right;
 margin: 0 0 10px 10px;
}