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

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

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


当前回答

我得到了这个工作在第一次尝试添加位置:绝对;底部:0;到CSS内部的div ID。我没有添加父样式的位置:relative;。

它在Firefox和IE 8中都很完美,还没有在IE 7中尝试过。

其他回答

If you're okay with only the bottom-most line of the text going to the side of the block (as opposed to completely around and underneath it, which you can't do without ending the block and starting a new one), it's not impossible to float a block to one of the bottom corners of a parent block. If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag. The last div is to make sure the parent tag surrounds the floated tags.

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

使用css的margin-top属性,目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

在与各种技巧斗争了几天之后,我不得不说这似乎是不可能的。即使使用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.

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

以下是我的解决方案:

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

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

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