javascript - 将div float 到右下角

Question

我可以将 div float 到右上角没有问题，但是我如何做同样的事情而不是移动到底部？

测试对象:http://jsfiddle.net/wQbB3/

.panel-2col-stacked {
  margin-top: 0;
  padding-top: 0;
}
.panel-2col-stacked .panel-col-top, .panel-2col-stacked .panel-col-bottom {
  clear: none !important;
  width: auto;
}
.panel-col-top {
  float: right;
  margin: 0 0 0 25px;
  vertical-align: bottom;
}

所以我需要 float .panel-col-top div。

请注意，我无法更改系统核心中的 HTML 结构，因此 div 和容器必须与上例中的完全相同。所以我想这只是一个 CSS 问题，或者也欢迎 JS。如果需要，我可以用 panel-col-bottom 替换/切换 panel-col-top 内容。

一些 Photoshop 技巧:

应该是这样的:

欢迎使用 JS 解决方案。

Answer 1

使用 HTML 和 CSS，最好的方法是使用 2 个段落和 align img 属性。

HTML:

<p>Sed eget lectus sagittis, tincidunt tortor eget, varius dolor. Maecenas aliquet venenatis vehicula. Praesent ullamcorper luctus purus, eu gravida odio fringilla a. Fusce id risus eu eros interdum pulvinar. Donec rhoncus felis vel tellus ullamcorper; id auctor nunc porta. Fusce sollicitudin elit rhoncus fermentum vulputate! In consequat massa at augue tempus vehicula. Mauris eu purus nec neque hendrerit pretium? Nunc in ante ultricies, pharetra lectus at, vulputate orci.</p>
<p><img width="333" height="233" alt="" src="http://i.imgur.com/OUYtEbj.jpg" align="right">Nulla blandit nulla nec risus commodo, sit amet volutpat dui aliquet. Donec dapibus et sem in imperdiet? Praesent non risus tortor? Praesent ut libero non ante lacinia tristique! Sed non porttitor velit, sit amet eleifend felis. Cras ultricies risus sem, non interdum enim ultricies quis. Nulla nec odio semper, cursus lorem ac, scelerisque lacus. Morbi in augue est. Aenean accumsan ligula a nulla egestas lobortis. In hac habitasse platea dictumst. Phasellus nec semper metus, volutpat posuere dolor. Quisque id condimentum dolor.</p>

我更新了 JS Fiddle。您可以在这里查看:http://jsfiddle.net/wQbB3/6/

这里有一些 JS 库可以将文本环绕在图像周围:

• jqSlickWrap:http://www.jwf.us/projects/jQSlickWrap/
• 培根:http://baconforme.com/