当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《如何让div浮动到其容器的底部?》经验,为你挑选了6个好方法。

我使用float:right(或left)多次浮动容器顶部的图像和嵌入框.最近我需要在另一个div的右下角浮动一个div,使用float得到的正常文本换行(文本包含在上方和左侧).

我认为这必须相对容易,即使浮点数没有底价,但我无法使用多种技术来做到这一点并且搜索网络除了使用绝对定位之外没有其他任何东西但是这不是给出正确的自动换行为.

我以为这将是一个非常常见的设计,但显然它不是.如果没有人有任何建议,我将不得不将我的文本分成单独的框并手动对齐div,但这是相当不稳定的,我不想在每个需要它的页面上进行操作.

编辑:给来这里的人留言.上面作为重复链接的问题实际上并不重复.文本环绕inset元素的要求使它完全不同.事实上,这里对最高投票答案的回应清楚地表明为什么相关问题的答案作为对这个问题的回答是错误的.无论如何,这个问题似乎仍然没有一般解决方案,但是这里和链接问题中发布的一些解决方案可能适用于特定情况.



1> Timothy Khou..:

将父div设置为position: relative,然后将内部div设置为...

position: absolute; 
bottom: 0;

......然后你去:)


是的,我认为这也是要走的路,但是当你将位置设置为绝对时,元素不再参与包含元素的布局,所以没有自动换行,并且底角的文字被遮挡了.
不幸的是,绝对位置被认为是不可接受的解决方案
不。这行不通。相反,它位于整个页面的底部。

2> 小智..:

使其工作的方法如下:

像往常一样将元素浮动

使用将父div旋转180度

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

JSfiddle:http://jsfiddle.net/wcneY/

现在将所有向左浮动的元素(给它们一个类)旋转180度,再将它们笔直放置.瞧!他们漂浮到底部.


这是魔鬼的工作,我立即使用它.
虽然这是一个了不起的解决方案,它会让我的Firefox夜间开发人员工具变得混乱:div选择器似乎忽略了旋转的div及其中的所有内容.

3> Stephen Mart..:

经过几天的各种技术挣扎后,我不得不说这似乎是不可能的.即使使用javascript(我不想这样做)它似乎也不可能.

为了澄清那些可能没有理解的人 - 这就是我正在寻找的东西:在出版中,布局插图(图片,表格,图形等)以使其底部与最后一个底部对齐是很常见的块(或页面)的文本行,其中文本以自然的方式围绕插入物在上方和右侧或左侧流动,这取决于插入页面的哪一侧.在html/css中,使用浮动样式将嵌入的顶部与块的顶部对齐是微不足道的,但令我惊讶的是,尽管它是常见的布局任务,但似乎无法排列文本的底部和插入.

我想我必须重新审视这个项目的设计目标,除非有人有最后一分钟的建议.


在下div中
,这是有效的.
不 - 这不是印刷出版.有一些事情使用html/css非常困难或无法实现.

4> 小智..:

我在JQuery中通过在右侧浮点上方放置零宽度支撑元素,然后根据父高度减去浮动子高度来调整支柱(或管道)的大小来实现此目的.

在js踢之前,我正在使用位置绝对方法,它可以工作,但允许后面的文本流.因此,我切换到静态位置以启用支柱方法.(标题是父元素,剪切是我想要右下角,管道是我的支柱)

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

管道必须是第一个,然后是剪切,然后是HTML顺序中的文本.


这是很多工作,并且使用javascript进行样式设置总是最后一步的后备,因为如果你以后改变你的css它会很容易搞砸.但是,是的,这确实有效,所以如果使用自动换行将底部排在底部是至关重要的:去吧.
这对我有用,但是我无法确切知道。我想.height()可能是罪魁祸首。似乎在浮动块周围有很多块级别的文本(如多个div和多个段落)环绕时,.height()会随文本断行的方式而有所不同。

5> 小智..:

这会在页面底部放置一个固定的div,并在向下滚动时固定到底部

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}


这并没有做他想做的事情.@Timoty和@Yona做对了.

6> Yona..:

将div放在另一个div中并将父div的样式设置为position:relative;Then然后在子div上设置以下CSS属性:position:absolute; bottom:0;

推荐阅读
女女的家_747
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有