11

我有三个 DIV，在 DIV 内，我想将“了解更多”浮动到右下角，这样它就会位于灰色背景的顶部。

三格

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

<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 - 编辑后

.trt {
    z-index: 9999999999999;
    position: absolute;
    bottom: 3px;
    right: 3px;
}
...
.main .cols .col-cnt { width: 183px; float: right; position: relative; }
...

编辑后

这个 CSS 工作：

.trt {
    z-index: 9999999999999;
    position: absolute;
    top: 85px;
    right: 3px;
}
4

5 回答 5

13

将col-cntdivposition: relative设置trt为position: absolute; bottom:3px; right:3px;那个应该可以让你到达你需要的地方。trt如果它被重用，应该是一个类

于 2013-04-01T16:31:54.627 回答
6

首先，您必须将#trt 的父级设置为相对。

#parent-of-trt  {
   position: relative;
}

并将#trt 设置为绝对

#trt {
   position: absolute;
   left: 4px;
   bottom: 5px;
}
于 2014-12-22T15:32:00.540 回答
3

由于#trtdiv 的宽度问题，您的 float: right 无法正常工作。基本上它延伸了 100% 的宽度，因此从技术上讲它不能向左或向右移动。而不是浮动，只需使用...

#trt { text-align: right; }

？？？

至于让它被推到那条灰线上，添加一些margin-top来#trt做到这一点......

其他解决方案是使用position: absolute;，但不太可取。

于 2013-04-01T16:35:29.397 回答
1

也许使用位置：绝对；而不是相对的

于 2013-04-01T16:32:44.243 回答
0

更改固定位置，如下所示：

position:fixed;

它应该工作。

于 2020-10-16T10:30:21.590 回答