关于html：将图片浮动到右下角，文字环绕 |
您所在的位置：网站首页 › html右上浮动 › 关于html：将图片浮动到右下角，文字环绕 |
|
我有一个带有段落和标题的文本容器。 我想在页面的底部将图像浮动到页面的右侧，而文字环绕图像。 图像的底部应与最后一段的底部齐平。 页面宽度是可变的(响应)，但是图像尺寸是固定的。 是否可以在HTML和CSS中完成此操作(CSS3很好)？ 如果没有，可以用最少的Javascript完成吗？ 这是我要完成的示意性示例：
HTML当前看起来像这样，但是可以根据需要进行更改。 我并不特别在意图像在文档中的位置。 使用背景图像也可以。 1234567891011 ... ... ... ... ... ...当我在图像上设置float: right时，它漂浮在右侧，但是我无法使其与页面底部对齐。建议？ 编辑：我最接近的是这个... :-) 相关讨论 您不能在浮动元素上设置底部位置，也不能将内容包装在绝对定位的元素周围。您可能需要为此使用脚本。 如果仅使用HTML / CSS无法完成，则对使用Javascript的解决方案开放。 stackoverflow.com/questions/526035/ jQuery好吗？ .... 我认为链接的问题不适用。我专门在寻找环绕图像的文字。我不介意是否使用了任何JS库，我只会使用相关的部分。 该图像具有固定高度或未定义？ 是的，图像尺寸是固定的。 我开始写东西，但是我没时间了。这可能会有所帮助：jqueryfordesigners.com/fixed-floating-elements CSS的可能重复项：将文本环绕在右下角的div上？ 实际上我知道这个问题，目前还没有CSS 2.1的解决方案。在CSS3的情况下，也许仅使用flexboxes，但IE9和更早版本不支持它们。您也可以使用：before和：last-of-type选择器将最后一段推到左侧，但是它仍然很丑陋，与其他段落重叠，并不是所有jsfiddle.net/Z7u6t的解决方案 我对基于CSS3的解决方案持开放态度。显然，这个问题以前已经提出过(纯HTML / CSS2不可能实现)。也许值得考虑这些天是否有新的或更确定的答案。 之前已经问过这个问题，并且没有提出有效的解决方案。 CSS的严重失败是诸如此类的布局问题没有解决方案。为这个问题+1 @isherwood-使用CSS排除，您可以浮动一个绝对定位的元素-如我在此处所示。没错，目前只有IE10 +支持此功能，但看起来这将是未来的方法。 可以使用CSS区域执行此操作，但我认为它目前仅适用于Chromes Canary浏览器。创建一个float: right和height等于内容高度减去图像高度的spacer元素。然后在图像上使用float: right和clear: right： 1 12345678910.spacer { height: calc(100% - 200px); width: 0px; float: right; } .bottomRight { height: 200px; float: right; clear: right; }http://cssdesk.com/bLNWs 我的演示在容器元素中使用了固定尺寸。由于这很少是现实情况，因此使用JavaScript调整间隔大小可能更有意义。调用此函数，在文档准备就绪时和在window.onresize事件期间将对引用传递给spacer元素。 1234567891011function 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或您选择的库进行重新设计。它并不是要成为插件质量代码，而只是用来说明概念。 jsfiddle.net/n5RPV/9 编辑：我创建了一个jQuery插件版本(github | jsFiddle演示)，该版本支持浮动的左下角或右下角。它还支持指定与底部对齐的元素。 顺便说一句，我没有费心尝试支持IE7。 sub> 相关讨论 在狭窄的屏幕上不起作用：屏幕截图 一个不错的固定宽度的解决方案，但是如果不计算魔术常数：(( @KyleMit-是的。这与我关于固定大小元素很少成为现实的观点一致。需要使用JavaScript解决方案来设置垫片的高度。 @ gilly3-即使使用JavaScript解决方案，您要做的最好的事情还是落在某个近似值之内-您将永远不会死。这是因为每次移动图像的位置时，文本都会以不同的方式环绕浮点，从而更改父代的高度。 +1酷更新的解决方案！ @Adam-接受挑战。您设想了这样的情况：我的代码产生了无法接受的结果，并且我使函数无法适应它。只要可能的结果是可以接受的(例如在Photoshop中)，我就可以使用JavaScript做到这一点。请记住，我在答案中发布的代码尚未准备好以插件代码的形式发布，但应该可以与您联系。 很棒的解决方案+1！ 小提琴运作得相当好，至少足以让我使用。图像顶部和左侧的边距会清除重叠部分。 @ gilly3我已经在我的应用程序上进行了此工作，我需要添加一张检查图像是否高于内容的支票。目前，将此代码发送到循环中。香港专业教育学院编辑解决方案。 @PeterWooster-太好了，谢谢！ 真的很好的解决方案:) JS似乎是目前最好的解决方案。谢谢！ 此解决方案要求您使用段落元素将文本内容实际上分成多行。如果您的文本没有段落，但是在一个div内只有几个句子，那么您将不会获得环绕效果。文本将始终显示在浮动元素的左侧，并且永远不会扩展到最右边的容器。 @AndroidDev-您接近。它要求内容具有作为容器元素后代的父元素。如果您的容器仅包含文本和要浮动的元素，则有两个选择。 1.最简单的方法是将文本包装在或任何其他元素中。 2.您可以调整代码以使用文本节点：使用container.childNodes(而不是container.children)获取文本节点，并使用Range对象获取textNode的边界客户端矩形。在这里工作：jsfiddle.net/n5RPV/120 我以您为例，您刚刚发布并修改了字体大小。调整宽度大小时，您会注意到顶行重叠在浮动图像的顶部。：jsfiddle.net/Deepview/5prgy4La 多数民众赞成在一个不幸的错误。它似乎仅在Chrome中存在。我无法在FireFox，Edge或Internet Explorer中复制它。这对您来说很常见吗？您是否经常想将某个元素浮动到某些内容的右下角，该内容比该浮动元素高出少于一行文本的高度？如果是这样，则可以添加一些逻辑来检查内容的高度，并且如果内容的高度不超过浮动元素，则不超过一行文本，请将间隔符折叠为height: 0px。像这样：jsfiddle.net/5prgy4La/2我认为将来解决此问题的方法将是CSS Exclusions。 CSS Exclusions extend the notion of content wrapping previously limited to floats. ... Elements layout their inline content in their content area and wrap around the exclusion areas in their associated wrapping context (--excerpts from the spec) 此msdn文章还解释了排除项 ...web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats. Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow. 具有讽刺意味的是，到目前为止，这仅在IE10中有效(请在此处查找wrap-flow：两者均如此) 在IE10 +中查看这个小提琴 代码如下所示： 123456 Exclusion positioned at bottom right hand side of text. text hereCSS 123456789101112131415161718.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; }正如您所看到的-即使排除对象的位置是绝对的-在这种情况下，它仍然像float一样起作用：float右下。 关于浏览器支持： 查看此站点，该站点显示浏览器支持哪些属性(迄今为止：仅IE10 +支持wrap-flow:both) PS：有关CSS排除(以及其他类似模块，如CSS区域和CSS Shapes)的最新更新，请访问Adobe Web Platform Team Blog。 相关讨论 这是前进的道路。不幸的是，目前看来这只是IE解决方案。希望其他浏览器默认会很快支持CSS排除！ 这是有希望的，但是Microsoft在IE10中的实现似乎有问题。 我想解决了。 有用！有了一些JavaScript和CSS，我做到了： http://jsfiddle.net/stichoza/aSScx/ 一个简单的floatify()函数。 响应。 调整窗口大小不会破坏它。 任何图像的宽度/高度。 放置任意数量的文本。灵感来源：http：//www.csstextwrap.com/ 相关讨论 不错，您应该在这里发布jQuery和其他东西1+ 在主要的浏览器中看起来不错，但是在FF 25上图像上方还有一些额外的空间。 仅供参考-调整窗口大小时，图像不会按照OP的要求保持与文本底部平行的恒定不变。 这仅是有效的，因为最后一段很大。 如果最后一段很短，则看起来不太好：屏幕截图 @ gilly3 Ive更新了代码，所以现在它也适用于较短的段落：我曾经研究过一种基于jQuery的解决方案，虽然可能不及gilly3发表的解决方案;)，但它也较慢且有点肿... 我的技巧是将两个附加到该部分，该部分浮动到左侧并隐藏宽度为0的宽度。div之一(将是指定的ghost元素，将与图像具有相同的尺寸)将被放置在另一个div下方，该div是指定的高度垫片。该脚本使用while循环来确定ghost元素是否已到达父section元素的底部。如果这没有发生，它将使高度垫片的高度增加1，直到满足条件为止。 我使用的标记如下。我正在使用HTML5属性data-bottom-image来标识您具有要浮动到底部的图像的部分。当然，它是可有可无的，具体取决于您要如何选择正确的section元素。 1234567 ... ...和jQuery脚本： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152$(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('') 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解决方案：(仅在chrome中测试) 使用CSS3的flex box属性和background-image属性的组合似乎可以正常工作。我仅使用CSS就可以使它非常接近。 (它可以工作，但需要一点调整)另外，这可能不是理想的选择，因为我必须稍微更改标记才能使它工作。但是，如果您正在寻找纯CSS解决方案，那么可能值得一试。 这是一个演示-> http://jsfiddle.net/ADSH2/ 新标记：(没有太大不同) 12345678910 Some Heading: ...
CSS： 123456789101112.last { display:inline-flex; flex-direction:row; } .image { padding:5px 0 0 5px; width:100%; background-image:url("http://dribbble.s3.amazonaws.com/users/200359/screenshots/758731/stackoverflow_logo.png"); background-size:100%; background-repeat:no-repeat; background-position:bottom right; }资源： A Complete Guide to Flexbox http://dev.w3.org/csswg/css-flexbox-1/ 相关讨论 flex box的一个问题是，很难使段落流到空的垂直空间中。我目前正在寻找是否有解决此问题的方法。 另外，仍然有太多的浏览器不支持flexbox。 这种解决方案的唯一问题是图像不能重排最后一段的文字。在这些限制条件下，它似乎运行得很好。 是的，我试图查看是否有解决方法。但是不幸的是，从我尝试过的一切来看，似乎都不可能。 仅CSS解决方案。 使用媒体查询可以完成这种布局。 HTML 123456789101112 ... ... ... ... ... ...CSS 1234567891011121314151617181920212223242526html, 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/ 相关讨论 我现在有一个类似的媒体查询解决方案，尽管它可以工作，但也非常脆弱且需要大量维护。 我知道，这不是理想的解决方案，但对于静态页面来说值得。这是带有一些jQuery的轻量级解决方案： http://jsfiddle.net/isherwood/6BvC2/ 1234567891011121314151617181920212223242526272829 Paragraphs... .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(); });为了消除对窃的任何担忧，此解决方案基于我前一段时间提供的另一个类似答案。 用这个 ： 12345678910111213141516 ... ... ... ... ... ... .post img {float:right;margin-top:80%}更改80％以获得最佳结果。 祝好运。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |