在div的每个角落放置4个html元素 [英] Placing 4 html elements in every corner of a div

问题描述

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

这是什么div应该看起来像（每种颜色都是一个元素），但我似乎无法得到正确的描述。

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

但是，无论我如何玩弄display：inline-block或float，我都无法实现它。

我希望你的某个人可以给我答案吗？

 < div style =width：180px; height：75px; background-color：green;  ID = 成绩 > 
< div> 
< p style =display：inline-block; margin：0pxid =title>标题标题标题< / p> 
< p style =margin：0px; float：right; id =exp> 500 exp< / p> 
< / div> 
< div> 
< img style =padding-left：10px; id =imgwidth =50height =50src =image.png/> 
 
< / div> 
< / div> 
  

（当然我使用了一个extern css文件，我只是使用样式标签来简化它）

解决方案使用 position：relative 容器来建立定位上下文。然后在所有孩子身上使用 position：absolute 将它们放在适当的角落。

#parent {position：relative;边框：3px纯蓝色;高度：300像素;宽度：500像素; padding：0;} p {position：absolute; border：2px solid;余量：0; padding：5px;} p：nth-​​child（1）{border-color：green;顶部：0;左：0; } p：nth-​​child（2）{border-color：red;顶部：0;右：0;} p：nth-​​child（3）{border-color：yellow;底部：0; left：0;} p：nth-​​child（4）{border-color：pink;底部：0; right：0;}

< div id =parent > < P>首先< / p为H. < P>第二个< / p为H. < p为H.;第三< / p为H. < p为H.第四< / P>< / DIV>

此处的示例实现

Hi there and thanks for your help. I have a div (180px to 75px) in which I need to place 3 paragraphes and an image. Now I need to place those elements in all of the divs corners. It should look something like this -> (I'm not allowed to post pictures yet. I hope you'll understand it anyway.)

This is what the div should look like (every color is an element), but I can't seem to get the description to the right.

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

But no matter how I play around with the "display: inline-block" or the "float" I can't get it to work.

I hope someon of you can give me the answer?

<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>

(I use an extern css file of course. I just used the style tag to make it easier for you to understand.)

解决方案

Use position:relative on the parent container to establish a positioning context. Then use position:absolute on all the children to put them in the appropriate corners.

#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

这篇关于在div的每个角落放置4个html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！