javascript – 将div浮动到右下角

2023年1月3日 347次阅读

我没有问题将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解决方案.

最佳答案 使用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/

点赞