我如何让一个div浮动到其容器的底部?

我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。

我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。

我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。

当前回答

哦,年轻人…给你:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

没有绝对的立场! 响应! 版的

2020-06-19 19:28:03

其他回答

A选择了@dave-kok这种方式。但只有当整个内容都适合而不需要滚动时，它才会起作用。如果有人能改进我将不胜感激

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

下面是代码http://jsfiddle.net/d9t9joh2/

2014-10-23 13:12:01

很老的问题，但仍然…… 你可以像这样将一个div浮动到页面底部:

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

你可以看到奇迹发生的地方。我认为你可以做同样的浮动到一个父div的底部。

2010-04-30 17:08:36

在与各种技巧斗争了几天之后，我不得不说这似乎是不可能的。即使使用javascript(我不想这样做)，这似乎是不可能的。

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

我想我将不得不重新审视这个项目的设计目标，除非有人有最后的建议。

2008-11-24 17:24:14

如果你想要文本包装漂亮:-

.outer { 显示:表; ｝在{ 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ /*仅用于样式*/ 在{ 背景:# eee; 填充:0 20px; ｝ <！——需要两个父元素——> < div class = "外" > < div class = "内部" > < h3 >标题< / h3 > 示例看 < / div > < / div >

2014-12-12 19:41:29

浮动和绝对定位的组合对我来说很有用。我试图把消息的发送时间放在语音气泡的右下角。时间不应该与消息体重叠，除非真的有必要，否则它不会使气泡膨胀。

解决方案是这样的:

有两个跨度，文本完全相同; 一个漂浮着，但看不见; 另一个是绝对定位到角落;

不可见的浮动对象的目的是保证可见对象的空间。

.speech-bubble { font-size: 16px; max-width: 240px; margin: 10px; display: inline-block; background-color: #ccc; border-radius: 5px; padding: 5px; position: relative; } .inline-time { float: right; padding-left: 10px; color: red; } .giant-text { font-size: 36px; } .tremendous-giant-text { font-size: 72px; } .absolute-time { position: absolute; color: green; right: 5px; bottom: 5px; } .hidden { visibility: hidden; } <ul> <li> This text is supposed to wrap the time which always seats at the corner of this bubble. 13:55 </li> <li> Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float. 13:55 </li> <li> Easy, uh? 13:55 </li> <li> Well, not THAT easy 13:56 </li> <li> See? 13:56 </li> <li> The problem is, we can't tell the span to float to right AND bottom... 13:56 </li> <li> We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go. 13:56 </li> <li> See? 13:56 13:56 </li> <li> Make the floated span invisible. 13:56 </li> <li> See? 13:56 13:56 </li> <li> The giant text here is to simulate images which are common in a typical chat app. Done! 13:56 13:56 </li> </ul>

2020-07-02 18:55:09

我如何让一个div浮动到其容器的底部?

推荐文章

最新文章

标签