Question

我刚刚练习使用HTML和CSS而且我遇到了一个问题。我希望这个（蓝色方块中的对象）在右边，但由于某种原因它会在其他所有内容下面。我该如何解决？这是我尝试过的：

enter image description here

HTML：

                    <div class="status-post row">
                        <div class="post-meta col-xs">
                            <center>
                            <img src="./testpost.png" alt/>
                            <p>
                                "This is a test status... Test. Test. Test."
                            </p>
                           </center>
                        </div>
                        <div class="post-interact col-xs-2">
                            <a href="#" class="vote voteup">
                                <img src="./img/global/upvote.png" alt/>
                            </a>
                            <span id="picidhere" class="count">100</span>
                            <a href="#" class="vote report">
                                <img src="./img/global/report.png" alt/>
                            </a>
                        </div>
                    </div>

CSS：

#appbody .status-post {
position: relative;
background: #76ac8b;
min-height: 300px;
padding: 25px;
margin-bottom: 25px;
opacity: 0.5;
}

#appbody .status-post .post-meta {
margin-bottom: 25px;
}


#appbody .status-post .post-meta img {
margin-left: auto;
margin-right: auto;
}

#appbody .status-post .post-meta p {
text-align: center;
font-size: 20px;
clear: both;
color: #FFF;
font-family: "Arvo";

}

#appbody .status-post .post-interact {
text-align: center;
margin: 0 auto;
height: 100%;
padding-right: 0px;
padding-left: 0px;
position: relative;
top: 50%;
transform: translateY(30%);
vertical-align: middle;

}

#appbody .status-post .post-interact .vote {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 20px;
display: block;
}

#appbody .status-post .post-interact .report {
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 26px;
display: block;
padding-top: 12px;
}


#appbody .status-post .post-interact .count {
font-size: 25px;
color: #FFF;
display: block;
font-family: "Arvo";
padding-top: 9px;
padding-bottom: 9px;
}

Answer 1

#appbody .status-post .post-interact {
 position: absolute;
 top: 10px;
 right: 10px 
}

使用绝对定位来放置元素

修改

检查此演示以了解绝对定位 http://jsfiddle.net/jja27pce/

Answer 2

就像其他人所说的那样，您需要将内容定位absolutely，然后将其置于右上角。

这样的代码应该有效：

.post-interact {
   position: absolute;
   top: 0px;
   right: 0px 
}

Answer 3

请在下面添加css

.post-interact {
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  }

进入你的CSS底部。

HTML元素不会向右引脚

3 个答案: