CSS:在填充文本的div的右下角对齐图像

你需要做一些事情来解决这个问题。

1)为该部分添加右填充，使其不与图像重叠。

#section {
    position: relative;
    padding-right:<at least image width so the text doesn't overlap>
}

2)当你添加一个div并在其中浮动时，浮动会将图像从文档流中移除，所以你需要添加另一个具有相同高度的内部div或使div的高度与图像的高度相同，或者只是添加一个浮动div.

<div id="image">
   <img src="example.jpg" alt="image"/>
   </div>
   <div style="clear:both"></div>
</div>

下面是一个可行的解决方案:http://jsfiddle.net/zV3wm/

我可以想到一种可变图像宽度和文本数量的方法，但这需要在标记中进行一些重复。

的要点是，你右浮动的隐藏版本的图像，然后使用溢出:隐藏，使段落反对浮动不会在它下面流动。然后，我们使用绝对定位将图像的非隐藏版本放置在容器的底部。

我已经在http://jsfiddle.net/UmGNZ/上准备了一个模型(我已经给了隐藏图像部分不透明度，所以你可以看到它被添加到文档中的位置)，但是对于一个伪html示例:

<container with position:relative>
    <right-float>
        <hidden img tag with opacity: 0 />
        <actual img tag with absolute positioning, bottom: 0, right: 0 />
    </right-float>
    <p with overflow:hidden (or auto) />
</container>

如果你不支持IE7，你也可以尝试使用CSS表格的纯CSS解决方案，但如果你使用visibility:hidden来支持不透明度，并在段落样式中添加zoom:1，那么这应该可以工作到IE6。

这个想法允许灵活的图像大小:http://jsfiddle.net/David_Knowles/F3zZU/4/

.cell {display:table-cell;}
#section {
    position: relative;
    width:300px;
}
#image {
    vertical-align: bottom;
}
<div id="section">
   <div class="cell">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
    </div>
    <div id="image" class="cell">
        <img src="http://placeimg.com/120/80/any" alt="image"/>
    </div>
</div>

我不认为我是正确的，但你可以通过浮动右和margin-top来实现。

#img {
    float: right;
    margin-top: -140px;
}

查看这个:http://jsfiddle.net/wrujx/

我认为最好的解决方案是使用一点jQuery (JavaScript)，让每个部分尽其所能地保持简单。这是你应该有的:

<div id="wrapper">
    <p>yourtexthere</p>
    <img src="whatever.jpg"/>
</div>

#wrapper{
    width:600px;
    border:1px solid #000000;
}
p{
    display:inline-block;
    margin-right:20px;
}
img{
    vertical-align:bottom;
}

var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)