浮动div到右下角

Question

我把div放到右上方没有问题，但是我该如何做同样的但是到底部？

测试对象：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;
}

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

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

一些Photoshop技能：

应该是这样的：

欢迎JS解决方案。

Answer 1

试试这个：

<强> HTML

<div class="panel-2col-stacked clearfix panel-display">

    <div class="panel-col-bottom panel-panel">
        <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>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>
    </div>
</div>
<div class="panel-col-top panel-panel">
        <img width="333" height="233" alt="" src="http://i.imgur.com/OUYtEbj.jpg" typeof="foaf:Image">
    </div>

<强> CSS

.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;
}

fiddle

使用jquery方法改变一点：

<强> JS

$(function(){
    $(".panel-col-top").appendTo(".panel-col-bottom p:nth-child(1)");

});

fiddle jquery approach

经过一些研究后，我使用prepend（）来结束：

<强> JS

$(function(){
    var a = $(".panel-col-top");

    $(".panel-col-bottom p:nth-child(2)").prepend(a);
});

fiddle with .prepend() approach

Answer 2

使用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/

Answer 3

// test this code
 .panel-2col-stacked {
    margin: 10px auto;
    position: relative;
    width: 1200px;
}
.panel-col-top {
     position: absolute;
     right: 33px;
     top: 41px;
 }
 .panel-col-bottom.panel-panel {
     height: 300px;
}
.panel-col-bottom.panel-panel p:last-child {
    padding-right: 400px;
 }