简单的CSS定位

好吧我在css和可怕的一些帮助下很糟糕。我知道对于擅长它的人来说这很简单。简单的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/[email protected]@._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”等级来做到这一点，因为一些标题比其他标题长。有人可以帮帮我吗？

来源

2014-01-28 drewg23

这里是一个非的位置是：绝对的解决方案：

而且重构您的标记：

HTML

<div class="container"> 

    <div class="left"> 
     <img src="http://tipmypicks.com/cssmovie/imdb/imdbImage.php?url=http://ia.media-imdb.com/images/M/[email protected]@._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

来源

2014-01-28 17:19:17

这显然是一种更清洁的方式。滥用绝对位置可能会导致页面在很多情况下中断。 – enguerranws

非常感谢您的回答！我的造型很糟糕，并有一个大脑放屁。这组织的事情要好得多 – drewg23

.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。之后，尝试一些额外的样式（边距，...）以获得正确的位置。

来源

2014-01-28 17:15:02 LarsEngeln

只是代替在第一行：

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

可以肯定的，你可以删除有关R级图像中的所有CSS。

来源

2014-01-28 17:18:42 enguerranws

简单的CSS定位

回答

相关问题