Html 使用 CSS 将 DIV 浮动到右下角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15747259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float a DIV toward bottom-right using CSS
提问by Si8
I have three DIV and inside the DIV, I would like to float the "Learn More" to bottom right so it will be on top of the grey background.
我有三个 DIV，在 DIV 内，我想将“了解更多”浮动到右下角，以便它位于灰色背景的顶部。
CSS
CSS
/* the div for LEARN MORE */
#trt {
z-index: 9999999999999;
position: relative;
float: right;
bottom: 0; // not working
top: 12; //not working
}
/* the entire div */
.main .cols { padding-left: 2px; padding-right: 0px; padding-top: 10px; }
.main .cols .col { width: 315px; height: 108px; float: left; background: url(images/tempf.png) no-repeat 0 0; }
.main .cols .col:after { content:''; width: 100%; clear: both; }
.main .cols .col + .col { padding-left: 20px; }
.main .cols .col img.hid { float: left; width: 129px; height: 108px; }
.main .cols .col-cnt { width: 183px; float: right; }
.main .cols .col .more { font-weight: bold; color: #0206AA; }
HTML
HTML
<div class="main">
<section class="cols">
<div class="col">
<a href="link.aspx">
<img class="hid" src="css/images/orgNews.png" alt="" />
</a>
<div class="col-cnt">
<h3 style="color: #FFFFFF;">Organization News</h3>
<p style="color: #FFFFFF;">Interfaith Medical Center related news and updates</p>
<div id="trt">
<img src="css/images/arrow.png" width=11 height=11 align=absmiddle />
<a href="link.asp" class="more">Learn More</a>
</div>
</div>
</div>
</section>
</div>
CSS - After Edit
CSS - 编辑后
.trt {
z-index: 9999999999999;
position: absolute;
bottom: 3px;
right: 3px;
}
...
.main .cols .col-cnt { width: 183px; float: right; position: relative; }
...
This CSS worked:
这个 CSS 有效：
.trt {
z-index: 9999999999999;
position: absolute;
top: 85px;
right: 3px;
}
采纳答案by kingkode
set col-cntdiv to position: relativeset trtto position: absolute; bottom:3px; right:3px;that should get you where you need to be.. also, trtshould be a class if it is being reused
集col-cntdiv来position: relative设置trt到position: absolute; bottom:3px; right:3px;应该让你在哪里你需要..也trt应该是一流的，如果被重用它
回答by searching9x
First at all, you must set parent of #trt to relative.
首先，您必须将#trt 的parent 设置为relative。
#parent-of-trt {
position: relative;
}
And set #trt to absolute
并将 #trt 设置为绝对
#trt {
position: absolute;
left: 4px;
bottom: 5px;
}
回答by Michael
Your float: right isn't working because of a width issue on the #trtdiv. Basically it's extending 100% of the width and so it can't technically go left or right. Instead of floating, just use...
由于#trtdiv上的宽度问题，您的 float: right 不起作用。基本上它扩展了 100% 的宽度，因此从技术上讲它不能向左或向右移动。而不是浮动，只需使用...
#trt { text-align: right; }
???
？？？
As for getting it pushed down onto that grey line, add some margin-topto #trtto do that...
至于得到它向下推到那个灰线，加一些margin-top到#trt这样做...
Other solution would be to use position: absolute;but would be less preferable.
其他解决方案是使用position: absolute;但不太可取。
回答by Cal37
maybe use position: absolute; instead of relative
也许使用位置：绝对；而不是亲戚
