您好,感谢您的帮助。
我有一个 div(180px 到 75px),我需要在其中放置 3 个段落和一个图像。
现在我需要将这些元素放置在所有 div 角中。
它应该看起来像这样 -> (我还不允许发布图片。无论如何,我希望你能理解。)
这就是 div 应该看起来的样子(每种颜色都是一个元素),但我似乎无法获得右侧的描述。
https://i.stack.imgur.com/wn8Q6.png
但无论我如何使用“display: inline-block”或“float”,我都无法让它工作。
希望有人能给我答案吗?
<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>
(当然我使用了外部的css文件。我只是使用了style标签来让你更容易理解。)
Use 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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)