8

您好，感谢您的帮助。我有一个 div（180px 到 75px），我需要在其中放置 3 个段落和一个图像。现在我需要将这些元素放在所有的 div 角落。它应该看起来像这样 -> （我还不允许发布图片。我希望你能理解它。）

这就是 div 的样子（每种颜色都是一个元素），但我似乎无法正确描述。

http://i.imgur.com/bE87euS.png

但无论我如何使用“显示：内联块”或“浮动”，我都无法让它工作。

我希望你们中的某个人能给我答案？

<div style="width:180px; height: 75px; background-color: green;" id="achievement">
    <div>
      <p style="display: inline-block; margin: 0px" id="title">Title Title Title</p>
      <p style="margin:0px; float:right;" id="exp">500 exp</p>
    </div>
    <div>
      <img style="padding-left: 10px;" id="img"width="50" height="50" src="image.png"/>
      <p style="float:right; margin: 0px;" id="desc">Bla Bla Bla this is a description</p>
    </div>
</div>

（当然我用的是extern css文件，我只是用了style标签，方便大家理解。）

4

2 回答 2

18

在父容器上使用position:relative以建立定位上下文。然后用position:absolute在所有孩子身上，把它们放在适当的角落里。

#parent {
    position:relative;
    border:3px solid blue;
    height:300px;
    width:500px;
    padding:0;
}
p {
    position:absolute;
    border:2px solid;
    margin:0;
    padding:5px;
}
p:nth-child(1) {
    border-color:green;
    top:0;
    left:0;    
}
p:nth-child(2) {
    border-color:red;
    top:0;
    right:0;
}
p:nth-child(3) {
    border-color:yellow;
    bottom:0;
    left:0;
}
p:nth-child(4) {
    border-color:pink;
    bottom:0;
    right:0;
}
<div id="parent">
    <p>First</p>
    <p>Second</p>
    <p>Third</p>
    <p>Fourth</p>
</div>

Sample implementation here

于 2013-06-11T21:58:54.380 回答
2

无论如何，使用text-align:rightThat 对我有用。

http://jsfiddle.net/Neaw7/

于 2013-06-11T21:54:42.970 回答