Html 将图像浮动到右下角，文字环绕

Question

提问by molf

I have a text container with paragraphs and headings. At the bottom of the page I want to float an image to the right of the page, while the text wraps around the image. The bottom of the image should be flush with the bottom of the last paragraph.

我有一个带有段落和标题的文本容器。在页面底部，我想将图像浮动到页面右侧，而文本环绕图像。图像的底部应与最后一段的底部齐平。

The page width is variable (responsive), but the image dimensions are fixed. Is it possible to accomplish this in HTML and CSS (CSS3 is fine)? If not, can it be done with a minimal amount of Javascript?

页面宽度是可变的（响应式），但图像尺寸是固定的。是否可以在 HTML 和 CSS（CSS3 很好）中完成此操作？如果没有，可以用最少的 Javascript 来完成吗？

Here's a schematic example of what I want to accomplish:

这是我想要完成的一个示意性示例：

Floating image to the bottom right

右下角浮动图片

The HTML currently looks something like this, but it can be changed if necessary. I don't particularly care where in the document the image is located. Using background images instead would be fine too.

HTML 目前看起来像这样，但可以根据需要进行更改。我并不特别关心图像在文档中的位置。使用背景图像也可以。

<section>
  <h2>...</h2>
  <p>... ...</p>
  <p>... ...</p>
  ...
  <img src="...">
</section>

When I set float: righton the image, it floats to the right but I cannot get it to align to the bottom of the page. Suggestions?

当我设置float: right图像时，它向右浮动，但我无法让它与页面底部对齐。建议？

Edit: the closest I got is this... :-)

编辑：我得到的最接近的是这个...... :-)

Answer 1

回答by gilly3

Create a spacer element with float: rightand heightequal to the height of the content minus the height of the image. Then use float: rightand clear: righton the image:

创建一个间隔元素，float: right其值height等于内容的高度减去图像的高度。然后在图像上使用float: right和clear: right：

<div class="spacer"></div>
<img class="bottomRight" src="" />
<div class="content"></div>

.spacer {
    height: calc(100% - 200px);
    width: 0px;
    float: right;
}
.bottomRight {
    height: 200px;
    float: right;
    clear: right;
}

http://cssdesk.com/bLNWs

My demo uses fixed dimensions in the container element. Since that is rarely a realistic case, it probably makes more sense to use JavaScript to size the spacer. Call this function, passing a reference to the spacer element when the document is ready and during the window.onresizeevent.

我的演示在容器元素中使用固定尺寸。由于这很少是现实情况，因此使用 JavaScript 来调整间隔的大小可能更有意义。调用此函数，在文档准备好和window.onresize事件期间传递对间隔元素的引用。

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

This function works (see the demo), and can be reworked for jQuery or your library of choice. It's not meant to be plug-in quality code, but serves to illustrate the concept.

此函数有效（请参阅演示），并且可以针对 jQuery 或您选择的库进行重新设计。它并不意味着是插件质量代码，而是用于说明这个概念。

jsfiddle.net/n5RPV/9

Edit:I created a jQuery plugin version (github| jsFiddle demo) that supports floating bottom left orbottom right. It also supports specifying which element to align the bottom with.

编辑：我创建了一个支持浮动左下角或右下角的 jQuery 插件版本 ( github| jsFiddle demo) 。它还支持指定与底部对齐的元素。

_{By the way, I didn't bother trying to support IE7.}

_{顺便说一下，我并没有费心去尝试支持 IE7。}

Answer 2

回答by Danield

I think the future way how to tackle this problem will be with CSS Exclusions.

我认为未来解决这个问题的方法将是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)

CSS Exclusions 扩展了以前仅限于浮动的内容包装概念。... 元素在其内容区域中布局其内联内容，并在其关联的包装上下文中环绕排除区域（--来自规范的摘录）

This msdn articlealso explains exclusions

这篇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.

...网络作者现在可以包装文本，使其完全围绕元素，从而避免浮动的传统限制。与限制元素相对于它们在文档流中的位置向左或向右浮动不同，CSS Exclusions 可以放置在距包含块的顶部、底部、左侧或右侧指定距离处，同时保留部分单据流。

Ironically, to date this only works in IE10 (look for wrap-flow:both here)

具有讽刺意味的是，到目前为止，这只适用于 IE10（在此处查找 wrap-flow:both ）

Check out this fiddlein IE10+

在 IE10+ 中查看这个小提琴

This is what the code looks like:

这是代码的样子：

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

So as you can see - even though the exclusion is positioned absolutely - it still acts like a float - in this case: float bottom right.

所以正如你所看到的 - 即使排除是绝对定位的 - 它仍然像一个浮动 - 在这种情况下：浮动右下角。

Regarding browser support:

关于浏览器支持：

Check out this sitewhich shows which properties are supported by the browsers (to date: only IE10+ supports wrap-flow:both)

查看此站点，该站点显示浏览器支持哪些属性（迄今为止：仅 IE10+ 支持wrap-flow:both）

PS: Latest updates concerning CSS exclusions (and other simlar modules like CSS regions and CSS Shapes) can be found at the Adobe Web Platform Team Blog

PS：有关 CSS 排除（以及其他类似模块，如 CSS 区域和 CSS 形状）的最新更新可以在 Adobe Web 平台团队博客中找到

Answer 3

回答by Kris Hollenbeck

Possible CSS Solution:(only tested in chrome)

可能的CSS解决方案：（仅适用于Chrome测试）

It looks like this might work using CSS3's flex box propertiesand a combination of background-imageproperties. I was able to get it pretty close using only CSS. (It works but needs a little tweaking) Also, this may not be ideal cause I did have to change the markup a little bit to make this work. But its probably worth a shot if you are looking for a pure CSS solution.

看起来这可能适用于 CSS3 的flex 框属性和background-image属性组合。我只使用 CSS 就可以非常接近它。（它可以工作，但需要稍作调整）此外，这可能不是理想的，因为我确实必须稍微更改标记才能使其正常工作。但如果您正在寻找纯 CSS 解决方案，它可能值得一试。

Here is a Demo ->http://jsfiddle.net/ADSH2/

这是一个演示 - > http://jsfiddle.net/ADSH2/

New Markup:(not to much different)

新的标记：（没有太大的不同）

<section >
  <h2>Some Heading:</h2>
  <p>...</p>
  <p class="last">
     <span class="image"></span>
  </p>
</section>

CSS:

CSS：

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

Resources:

资源：

Answer 4

回答by Terry

I have worked on a jQuery-based solution — probably not as elegant as the one posted by gilly3 though ;) and it's also slower and a bit bloated...

我已经开发了一个基于 jQuery 的解决方案——可能没有gilly3 发布的解决方案那么优雅；) 而且它也更慢而且有点臃肿......

My trick is to append two <div>s to the section, which is floated to the left and hidden width a width of 0. One of the div, a designated ghost element that will have the same dimension as the image, will be positioned below another div that is the designated height spacer. The script uses a while loop to establish if the ghost element has reached the bottom of the parent section element. If this has not happened, it will increment the height of the height spacer by 1, until the condition is satisfied.

我的技巧是将两个<div>s附加到该部分，该部分向左浮动，隐藏宽度为 0。其中一个 div，一个与图像具有相同尺寸的指定重影元素，将位于另一个 div 下方那是指定的高度间隔。该脚本使用 while 循环来确定 ghost 元素是否已到达父节元素的底部。如果没有发生这种情况，它将高度间隔器的高度增加 1，直到条件满足。

The markup I have used is as follow. I'm using the HTML5 attribute data-bottom-imageto identify sections that you have the image to be floated to the bottom. Of course it is dispensable, depending on how you want to select for the correct section element.

我使用的标记如下。我正在使用 HTML5 属性data-bottom-image来标识您将图像浮动到底部的部分。当然它是可有可无的，这取决于您希望如何为正确的部分元素选择。

<section id="c1" data-bottom-image>
    <h2>...</h2>
    <p>...</p>
    <img src="http://placehold.it/250x100" />
</section>

And the jQuery script:

和 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"));
        });
    }));
});

And here is the working Fiddle: http://jsfiddle.net/teddyrised/xmkAP/5/

这是工作小提琴：http: //jsfiddle.net/teddyrised/xmkAP/5/

Answer 5

回答by Stichoza

I guess it's solved. It works!

估计已经解决了有用！

With a little bit of JavaScript and CSS I did it like this:

使用一点 JavaScript 和 CSS，我是这样做的：

http://jsfiddle.net/stichoza/aSScx/

http://jsfiddle.net/stchoza/aSScx/

One simple floatify()function.

一个简单的floatify()功能。

Responsive.
Window resizing won't break it.
Any image width/height.
Put as many text you want.

反应灵敏。
窗口大小调整不会破坏它。
任何图像宽度/高度。
输入任意数量的文本。

Idea inspired by: http://www.csstextwrap.com/

灵感来自：http: //www.csstextwrap.com/

Answer 6

回答by Oriol

CSS only Solution.

仅 CSS 解决方案。

Using media queries one can accomplish this layout.

使用媒体查询可以完成这种布局。

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

It plays well at different screen resolutions. See demo.

它在不同的屏幕分辨率下都能很好地播放。见演示。

One has to play/adjust the CSS media queries as well as the position of the images within the markup in order to make it work.

必须播放/调整 CSS 媒体查询以及标记中图像的位置才能使其工作。

CSS media queries is supported in Firefox 3.5+, Opera 7+, Safari 3+, Chrome and IE9+. For older IE versions one can use this fix: http://code.google.com/p/css3-mediaqueries-js/

Firefox 3.5+、Opera 7+、Safari 3+、Chrome 和 IE9+ 支持 CSS 媒体查询。对于较旧的 IE 版本，可以使用此修复程序：http: //code.google.com/p/css3-mediaqueries-js/

Answer 7

回答by hesam jaferi

use this :

用这个：

<section class="post">
  <h2>...</h2>
  <p>... ...</p>
  <p>... ...</p>
  ...
  <img src="...">
</section>

<style>
.post img {float:right;margin-top:80%}

</style>

change 80%to get best result.

改变80%以获得最佳结果。

Good Luck.

祝你好运。

Answer 8

回答by isherwood

Here's a lightweight solution with a bit of jQuery:

这是一个带有一些 jQuery 的轻量级解决方案：

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

To dispel any concerns about plagiarism, this solution is based on another similar answerI provided a while back.

为了消除对抄袭的任何担忧，此解决方案基于我不久前提供的另一个类似答案。

Html 将图像浮动到右下角，文字环绕

提问by molf

回答by gilly3

回答by Danield

Check out this fiddlein IE10+

在 IE10+ 中查看这个小提琴

CSS

CSS

回答by Kris Hollenbeck

回答by Terry

回答by Stichoza

I guess it's solved. It works!

估计已经解决了有用！

回答by Oriol

回答by hesam jaferi

回答by isherwood

相关推荐

最近更新

标签

Html 将图像浮动到右下角，文字环绕

提问by molf

回答by gilly3

回答by Danield

Check out this fiddlein IE10+

在 IE10+ 中查看这个小提琴

CSS

CSS

回答by Kris Hollenbeck

回答by Terry

回答by Stichoza

I guess it's solved. It works!

估计已经解决了 有用！

回答by Oriol

回答by hesam jaferi

回答by isherwood

相关推荐

Html Twitter Bootstrap 3 删除一行和第 12 列上的右侧边距和填充

Html 如何以角度禁用特定日期之前的所有日期？

Html 使一个 div 粘在另一个绝对定位的溢出滚动 div 的顶部

Html 加载资源失败：服务器响应状态为 404（未找到）css

相关推荐

最近更新

标签

估计已经解决了有用！