Question

我想将DIV放在DIV内部的右上角（蓝色区域内）。我用position:absolute来说明，但解决方案不能{＆＃34;}＃34;} DIV，因为我使用了Masonry，这会将position:absolute添加到我的网格项目中，当我使用它时，加载或重新刷新页面时的布局会搞砸几秒钟。有可能实现我的目标吗？同样，我无法为.tag。

实施position:absolute

小提琴：Fiddle

HTML：

position:absolute

CSS：

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

Answer 1

检查此代码..正常工作小提琴 - 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;
 }

Answer 2

选中fiddle。

我在equals()之前放置了.tag，为底部编辑了.masonry_item_inner，并且左填充，并给了{{1 top 和 right 填充。

Answer 3

使用保证金可以修复它。

Fiddle

＆＃13;

.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;
    margin-top: -194px;
    margin-right: -40px;
  /*  position:absolute; */
}

.box {
    width: 400px;
    padding: 40px;
    background-color:blue;
}

.title {
    color:green;
    background-color:white;
    font-style:40px;
    font-weight:bold;
}

＆＃13;

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

＆＃13;

仅当.box高度和宽度固定时才会这样。

将div放在div的右上角，而不是使用position：absolute

3 个答案: