将div中的div放在右上角，而不是使用position：absolute [英] Position div inside div in top-right-corner and not use position:absolute

问题描述

我想将一个DIV放在DIV中的右上角（在蓝色区域内）。我用 position：absolute 来举例说明，但解决方案不能为 DIV使用 position：absolute ，因为我使用了Masonry，并在我的网格项目中添加了 position：absolute ，当我使用它时，页面加载或重新刷新时的布局也会混乱几秒钟。是否有可能实现我的目标？再一次，我无法为.tag实现 position：absolute 。

小提琴：小提琴

HTML：

 < div class =article> 
< article class =box> 
< div class =masonry_item_inner> 
< div class =blogpost> 
< img src =http://placehold.it/350x150> 
< / div> 
< div class =tag> MY TAG HERE< / div> 
< div class =title> BIG标题< / div> 
< div class =summary>这是关于这是关于这是关于这是关于这是关于这是关于这是关于这是关于这是关于这是关于< / div> 
< / div> 
< / article> 
< / div> 
  

CSS：

  .tag {
 top：0px; 
 right：0px; 
 min-height：0px; 
} 
 
 .tag {
 font-size：14px; 
 font-family：'Droid Serif'; 
 text-align：center; 
颜色：#FFF; 
 margin-left：15px; 
 padding：6px; 
背景颜色：红色; 
 float：right; 
 z-index：3; 
 display：block; 
位置：绝对; 
} 
 
 .box {
 width：400px; 
 padding：40px; 
 background-color：blue; 
} 
 
 .title {
颜色：绿色; 
背景颜色：白色; 
 font-style：40px; 
 font-weight：bold; 
 
  

解决方案

检查此代码。工作
小提琴在这里 - http://jsfiddle.net/hf1db9go/10/ p>

HTML

 < div class =article> 
< article class =box> 
< div class =tag> MY TAG HERE< / div> 
 
< div class =masonry_item_inner> 
< div class =blogpost> 
< img src =http://placehold.it/350x150> 
< / div> 
 
< div class =title> BIG标题< / div> 
< div class =summary>这是关于这是关于这是关于这是关于这是关于这是关于这是关于这是关于这是关于这是关于< / div> 
< / div> 
< / article> 
  

CSS

  .masonry_item_inner {
 position：relative; 
 float：left; 
 left：30px; 
 
} 
 
 
 .tag {
 top：0px; 
 right：0px; 
 min-height：0px; 
 
} 
 
 .tag {
 font-size：14px; 
 font-family：'Droid Serif'; 
 text-align：center; 
颜色：#FFF; 
 margin-left：15px; 
 padding：6px; 
背景颜色：红色; 
 float：right; 
 z-index：3; 
 display：block; 
职位：亲属; 
} 
 
 .box {
 width：400px; 
 
 background-color：blue; 
 display：inline-block; 
位置：绝对; 
} 
 
 .title {
颜色：绿色; 
背景颜色：白色; 
 font-style：40px; 
 font-weight：bold; 
} 
  

I want to position a DIV in the top-right-corner inside a DIV (inside the blue area). I used position:absolute to illustrate, but the solution CAN NOT have position:absolute for the "tag" DIV because I use Masonry and this adds position:absolute to my grid items and when I use it also the layout upon load or re-fresh of page gets messed up for a few seconds. Is it possible to achieve my objective? Again, I cannot implement position:absolute for .tag.

Fiddle: Fiddle

HTML:

<div class="article">
    <article class="box">
        <div class="masonry_item_inner">
            <div class="blogpost">
                <img src="http://placehold.it/350x150">
            </div>
            <div class="tag">MY TAG HERE</div>
                <div class="title">BIG Headline</div>
                <div class="summary">This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about</div>
        </div>
    </article>
</div>

CSS:

.tag {
    top: 0px;
    right: 0px;
    min-height: 0px;
}

.tag {
    font-size:14px;
    font-family:'Droid Serif';
    text-align:center;
    color:#FFF;
    margin-left:15px;
    padding:6px;
    background-color:red;
    float:right;
    z-index:3;
    display:block;
    position:absolute;
}

.box {
    width: 400px;
    padding: 40px;
    background-color:blue;
}

.title {
    color:green;
    background-color:white;
    font-style:40px;
    font-weight:bold;
}

解决方案

check this code..its working Fiddle Here- http://jsfiddle.net/hf1db9go/10/

HTML

       <div class="article">
    <article class="box">
      <div class="tag">MY TAG HERE</div>

    <div class="masonry_item_inner">
        <div class="blogpost">
            <img src="http://placehold.it/350x150">
        </div>

            <div class="title">BIG Headline</div>
            <div class="summary">This is about This is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is aboutThis is about</div>
    </div>
</article>

CSS

        .masonry_item_inner{
    position:relative;
   float:left;
   left:30px;

     }


    .tag {
   top: 0px;
 right: 0px;
  min-height: 0px;

     }

     .tag {
   font-size:14px;
 font-family:'Droid Serif';
   text-align:center;
  color:#FFF;
  margin-left:15px;
  padding:6px;
  background-color:red;
  float:right;
 z-index:3;
 display:block;
  position:relative;
 }

 .box {
  width: 400px;

background-color:blue;
  display:inline-block;
position:absolute;
 }

   .title {
  color:green;
  background-color:white;
  font-style:40px;
  font-weight:bold;
 }

这篇关于将div中的div放在右上角，而不是使用position：absolute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！