浮動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;
}

小提琴

用jquery方法改變一下：

JS

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

});

小提琴jquery方法

經過一些研究后，我使用prepend（）結束了這個：

JS

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

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

擺弄.prepend（）方法

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