Question

好吧我在css上很可怕而且急需一些帮助。我知道对于那些擅长它的人来说这很简单。

我包含了我的代码以及我正在尝试的内容，以及几张图片。第一张照片就是我的照片。第二个是我希望它看起来像。

What I have

What I want it to look like

HTML

    <div class="thumbposter"><img src="http://tipmypicks.com/cssmovie/imdb/imdbImage.php?url=http://ia.media-imdb.com/images/M/MV5BMTcwNzUzMjU1OV5BMl5BanBnXkFtZTcwMTM0NDQ2MQ@@._V1._SY200.jpg"/><div class="ratingimage"><h1>Step Brothers</h1><img src="http://tipmypicks.com/cssmovie/images/ratedr.png"></div></div>
    <div class="genre"><p>Genre: Comedy</p></div>
    <div class="releasedate"><p>Released: 2008</p></div>
    <div class="rating"><p>Rating: 6.8</p></div>
    <div class="plot"><h1>Plot</h1><p>Two aimless middle-aged losers still living at home are forced against their will to become roommates when their parents get married.</p></div>

CSS

<style> 
@font-face
{
    font-family: MyriadPro-Regular;
    src: url(http://tipmypicks.com/cssmovie/font/MyriadPro-Regular.otf);
}


.thumbposter img
{
    margin-top: 50px;
    margin-left: 50px;
    border:2px solid;
    border-color: grey;
    border-radius:2px;
}

.thumbposter h1 {
    position: absolute;
    left: 500px; 
    top: 60px;
    color: white;
    font-size:30px;
    font-family: MyriadPro-Regular;
}

.releasedate p {
    position: absolute;
    left: 323px; 
    top: 295px;
    color: white;
    font-size:15px;
}

.genre p {
    position: absolute;
    left: 323px;
    top: 315px;
    color: white;
    font-size:15px;
}

.rating p {
    position: absolute;
    left: 323px;
    top: 275px;
    color: white;
    font-size:15px;
}

.plot p {
    position: absolute;
    left: 500px; 
    top: 170px;
    width: 500px;
    color: white;
    font-size:15px;
}

.trailer a {
    position: absolute;
    left: 345px; 
    top: 260px;
    color: white;
    font-size:17px;
}

.playbutton img {
    position: absolute;
    left: 325px; 
    top: 260px;
}

.plot h1 {
    position: absolute;
    left: 500px; 
    top: 140px;
    color: white;
    font-size:22px;
}


.ratingimage img {
    position: relative;
    left: 500px; 
    top: 60px;
    float:left;
}


@font-face
{
    font-family: airstrikebold;
    src: url(http://tipmypicks.com/cssmovie/font/airstrikebold.ttf);
}
</style>

我只是希望R在标题旁边...正如你从我的代码中看到的那样，我在css上很糟糕并且使用绝对定位来做所有事情，我不能用“R”等级做到这一点因为一些标题比其他标题更长。有人可以帮助我吗？

Answer 1

只需将第一行替换为：

<div class="thumbposter"><img src="http://tipmypicks.com/cssmovie/imdb/imdbImage.php?url=http://ia.media-imdb.com/images/M/MV5BMTcwNzUzMjU1OV5BMl5BanBnXkFtZTcwMTM0NDQ2MQ@@._V1._SY200.jpg"/><div class="ratingimage"><h1>Step Brothers <img src="http://tipmypicks.com/cssmovie/images/ratedr.png"></h1></div>

当然，您可以删除有关评级R图像的所有CSS。

Answer 2

这是一个非立场：绝对解决方案：

还重构了你的标记：

<强> HTML

<div class="container">

    <div class="left">
         <img src="http://tipmypicks.com/cssmovie/imdb/imdbImage.php?url=http://ia.media-imdb.com/images/M/MV5BMTcwNzUzMjU1OV5BMl5BanBnXkFtZTcwMTM0NDQ2MQ@@._V1._SY200.jpg"/>
        <p>Genre: Comedy</p>
        <p>Released: 2008</p>
        <p>Rating: 6.8</p>
    </div><! /.left -->

    <div class="right">
        <h1>Step Brothers <img src="http://tipmypicks.com/cssmovie/images/ratedr.png"></h1>

        <h1>Plot</h1>
        <p>Two aimless middle-aged losers still living at home are forced against their will to become roommates when their parents get married.</p>


    </div><!-- /.right --> 

    <div class="clear"></div>

</div><!-- /.container -->

<强> CSS

.left { float:left; width:200px; }
.right { float:left; width:400px; }

.clear { clear:both }

<强> JSFiddle Demo

Answer 3

.ratingimage img {
    /* do not need styling */
}
.thumbposter h1 {
    display: inline; /* add this */

    position: absolute;
    left: 500px; 
    top: 60px;
    color: white;
    font-size:30px;
    font-family: MyriadPro-Regular;
}

应该交换标题旁边的img。然后，尝试一些额外的造型（边距，......）以获得正确的位置。

简单的CSS定位

3 个答案: