将图像浮动到右下angular，并用文字环绕
我有一个带有段落和标题的文本容器。 在页面的底部，我想将图像浮动到页面的右侧，文字环绕图像。 图像的底部应该与最后一段的底部齐平。
页面宽度是可变的（响应），但图像尺寸是固定的。 是否有可能在HTML和CSS（CSS3罚款）完成这一点？ 如果不是，可以用最less量的Javascript来完成吗？
以下是我想要完成的一个示意性示例：
HTML目前看起来像这样，但可以根据需要进行更改。 我不特别在乎图像所在的文档的位置。 反过来使用背景图片也可以。
<section> <h2>...</h2> <p>... ...</p> <p>... ...</p> ... <img src="..."> </section> 当我设置float: right在图像float: right ，它漂浮在右侧，但我不能让它alignment到页面的底部。 build议？
编辑：最近我得到了这个 … 🙂
用float: right和height创build一个spacer元素，减去图片的高度。 然后使用float: right和clear: right在图像上：
<div class="spacer"></div> <img class="bottomRight"></div> <div class="content"></div>
.spacer { height: calc(100% - 200px); width: 0px; float: right; } .bottomRight { height: 200px; float: right; clear: right; }
我的演示在容器元素中使用了固定的尺寸。 由于这种情况很less是现实的，因此使用JavaScript来调整间隔符的大小可能更有意义。 调用此函数，在文档准备就绪时以及在window.onresize事件期间传递对spacer元素的引用。
function sizeSpacer(spacer) { spacer.style.height = 0; var container = spacer.parentNode; var img = spacer.nextElementSibling || spacer.nextSibling; var lastContentNode = container.children[container.children.length - 1]; var h = Math.max(0, container.clientHeight - img.clientHeight); spacer.style.height = h + "px"; while (h > 0 && img.getBoundingClientRect().bottom > lastContentNode.getBoundingClientRect().bottom) { spacer.style.height = --h + "px"; } }
这个函数可以工作（ 参见演示 ），并且可以重写jQuery或您select的库。 这并不意味着插件质量代码，而是用来说明这个概念。
jsfiddle.net/n5RPV/9
编辑：我创build了一个jQuery插件版本（ github | jsFiddle演示 ），支持左下或右下浮动。 它还支持指定哪个元素alignment底部。
顺便说一句，我没有打算试图支持IE7。
我认为未来的方式将如何解决这个问题将与CSS排除 。
CSS排除扩展了之前仅限于浮动的内容包装的概念。 …元素在其内容区域中布局其内联内容，并在相关的包装上下文中环绕排除区域（ – 从规范中摘录）
这个MSDN文章也解释了排除
networking作者现在可以包装文本，使其完全围绕元素，从而避免传统的浮动限制。 相对于在文档stream中相对于其位置左右移动的元素，CSS排除可以定位在与包含块的顶部，底部，左侧或右侧相距指定的距离，而剩余部分文档stream。
具有讽刺意味的是，迄今为止，这只适用于IE10（寻找包装stream程：在这里 ）
在IE10 +中查看这个小提琴
这是代码的样子：
<div class="container"> <div class="exclusion"> Exclusion positioned at bottom right hand side of text. </div> <div class="dummy_text"> <p>text here</p> </div> </div>
CSS
.container { font-size: small; background: aqua; position: relative; } .exclusion { -ms-wrap-flow: both; -ms-wrap-margin: 10px; z-index: 1; position:absolute; right:0; bottom:0; /* try fiddling with this. For some reason bottom: -10px (or the like) works better here */ width: 150px; height: 100px; background: url(http://placehold.it/150x100) no-repeat; }
所以，正如你所看到的 – 尽pipe排除是绝对定位的 – 它仍然像浮动一样 – 在这种情况下：浮动右下。
关于浏览器支持：
看看这个网站 ，显示浏览器支持哪些属性（迄今为止：只有IE10 +支持wrap-flow:both ）
PS：有关CSS排除（以及CSS区域和CSS形状等其他类似模块）的最新更新可以在Adobe Web Platform团队博客中find
我曾经在一个基于jQuery的解决scheme上工作 – 可能不像gilly3发布的那样高雅）;而且它也比较慢，有点臃肿…
我的诀窍是追加两个<div> s的部分，这是浮动的左侧和隐藏宽度的宽度0.其中一个div，一个指定的鬼元素将具有相同的尺寸作为图像，将被定位低于另一个div是指定的高度垫片。 该脚本使用while循环来确定ghost元素是否已经到达父节点元素的底部。 如果没有发生这种情况，将使高度垫片的高度增加1，直到满足条件。
我使用的标记如下。 我正在使用HTML5属性data-bottom-image来标识您将图像浮动到底部的部分。 当然，这是可有可无的，取决于你想如何select正确的部分元素。
<section id="c1" data-bottom-image> <h2>...</h2> <p>...</p> <img src="http://placehold.it/250x100" /> </section>
和jQuery脚本：
$(function () { $("section > img:last-child").each(function () { // Offset image based on the bottom and right padding of parent var $par = $(this).parent(); $(this).css({ bottom: $par.css('padding-bottom'), right: $par.css('padding-right') }); }); // Function: adjust height of height-spacer, pixel by pixel function adjustHeightSpacer($par, $hs, $is) { // Stretch height spacer $hs.height(0); $hs.css({ height: $par.find("img").position().top - parseInt($par.css('padding-top')) }); // Adjust height spacer while($par.height() - $is.height() > $is.position().top - parseInt($par.css('padding-top'))) { $hs.height("+=1"); } while($par.height() - $is.height() < $is.position().top - parseInt($par.css('padding-top'))) { $hs.height("-=1"); } }; $("section[data-bottom-image]").each(function() { // Append two spacers: $(this).prepend('<div class="ghost height-spacer" /><div class="ghost image-spacer" />') var $hs = $(this).find(".height-spacer"), $is = $(this).find(".image-spacer"); // Adjust image spacer dimension $is.css({ height: $(this).find("img").height(), width: $(this).find("img").width() }); // Adjust height spacer adjustHeightSpacer($(this), $hs, $is); }); $(window).resize($.debounce(250,function() { $("section[data-bottom-image]").each(function() { // Adjust height spacer adjustHeightSpacer($(this), $(this).find(".height-spacer"), $(this).find(".image-spacer")); }); })); });
这里是工作的小提琴： http : //jsfiddle.net/teddyrised/xmkAP/5/
可能的CSS解决scheme:( 仅在Chrome中testing ）
它看起来像这样可以使用CSS3的弹性框属性和background-image属性的组合。 我只能使用CSS来获得非常接近的效果。 （ 它的工作，但需要一点调整 ）此外，这可能不是理想的，因为我不得不改变标记一点点，使这项工作。 但是如果你正在寻找一个纯粹的CSS解决scheme，它可能是值得的。
这里是一个演示 – > http://jsfiddle.net/ADSH2/
新的标记:( 没有太大的不同 ）
<section > <h2>Some Heading:</h2> <p>...</p> <p class="last"> <span class="image"></span> </p> </section>
CSS：
.last { display:inline-flex; flex-direction:row; } .image { padding:5px 0 0 5px; width:100%; background-image:url("users/200359/screenshots/758731/stackoverflow_logo.png"); background-size:100%; background-repeat:no-repeat; background-position:bottom right; }
资源：
我想它已经解决了。 有用！
有了一点JavaScript和CSS，我就这样做了：
http://jsfiddle.net/stichoza/aSScx/
一个简单的floatify()函数。
- 响应。
- 窗口大小不会打破它。
- 任何图像的宽度/高度。
- 把尽可能多的文字，你想要的。
灵感来自： http : //www.csstextwrap.com/
仅CSS解决scheme。
使用媒体查询可以完成这个布局。
HTML
<section> <h2>...</h2> <p>... ...</p> <p>... ...</p> <img src="..." class="show-medium"> ... <img src="..." class="show-small"> </section>
CSS
html, body { height: 100%; width: 100%; } img { display: none; float: right; clear: right; } @media (max-width: Xpx), (max-height: Xpx) { /* show img for small screens */ .show-small { display:block; } } @media (min-width: Xpx) and (max-width: Xpx) and (min-height:Xpx) and (max-height: Xpx) { /* show img for medium screens */ .show-medium { display:block; } } @media (min-width: Xpx) and (min-height: Xpx) { /* show img as body background for large screens */ body { background: url("http://placehold.it/200x300") no-repeat fixed right bottom transparent; } }
它可以在不同的屏幕分辨率下播放。 看演示 。
人们必须播放/调整CSS媒体查询以及标记内图像的位置以使其工作。
Firefox 3.5+，Opera 7+，Safari 3+，Chrome和IE9 +支持CSS媒体查询。 对于较旧的IE版本，可以使用此修复程序： http : //code.google.com/p/css3-mediaqueries-js/
用这个 ：
<section class="post"> <h2>...</h2> <p>... ...</p> <p>... ...</p> ... <img src="..."> </section> <style> .post img {float:right;margin-top:80%} </style>
改变80％以获得最佳结果。
祝你好运。
这里有一个jQuery的轻量级解决scheme：
http://jsfiddle.net/isherwood/6BvC2/
<section class="flagpole"> <div class="pole"></div> <img class="flag" src="..." /> <p>Paragraphs...</p> </section> .pole, .flag { float: right; clear: right; } .pole { width: 0.1px } function setFlag() { $('section.flagpole').each(function () { var poleHeight = $(this).height() - $(this).find('.flag').height(); $(this).find('.pole').height(poleHeight); }); } setFlag(); $(window).on('resize', function () { setFlag(); });
为了消除对剽窃的担忧，这个解决scheme基于我提供的另一个类似的答案 。
