Question

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

页面宽度可变（响应），但图像尺寸是固定的。是否有可能在HTML和CSS中实现这一点（CSS3很好）？如果没有，可以使用最少量的Javascript完成吗？

以下是我想要完成的示意图：

Floating image to the bottom right

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

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

当我在图像上设置float: right时，它会向右浮动，但我无法将其对齐到页面底部。建议？

编辑：我得到的最近的是this ...： - ）

Answer 1

创建一个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

我的演示使用容器元素中的固定尺寸。由于这很少是一个现实的案例，因此使用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";
    }
}

此函数有效（see the demo），可以为jQuery或您选择的库重新编写。它并不意味着是插件质量代码，而是用来说明这个概念。

jsfiddle.net/n5RPV/9

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

_{顺便说一句，我并不打算尝试支持IE7。}

Answer 2

我认为如何解决这个问题的未来方式将是CSS Exclusions。

CSS排除扩展了之前内容包装的概念仅限于花车。 ...元素在其内容区域中布置其内联内容，并在其关联的包装上下文中包围排除区域（ - 摘自the spec）

此msdn article也解释了排除

...网络作者现在可以将文字换行以便完全包围元素，从而避免浮动的传统限制。而不是限制元素向左或向右浮动相对于它们在文档流中的位置，CSS Exclusions可以位于距离顶部，底部，左侧或者顶部的指定距离处包含块的右侧，而剩余的一部分文件流程。

具有讽刺意味的是，到目前为止，这仅适用于IE10（查找wrap-flow：here）

在IE10 +

中查看this fiddle

这就是代码的样子：

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

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

关于浏览器支持：

查看this site，其中显示了浏览器支持的属性（迄今为止：只有IE10 +支持wrap-flow:both）

PS：有关CSS排除（以及CSS区域和CSS形状等其他模拟模块）的最新更新可在Adobe Web Platform Team Blog

找到

Answer 3

可能的CSS解决方案：（仅在Chrome中测试）

看起来这可能会使用CSS3的flex box properties和background-image属性的组合。我只能使用CSS来完成它。（它可以工作，但需要一些调整）此外，这可能不是理想的因为我必须稍微更改标记以使其工作。但是如果你正在寻找纯CSS解决方案，它可能值得一试。

这是一个演示 - ＆gt; 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("http://dribbble.s3.amazonaws.com/users/200359/screenshots/758731/stackoverflow_logo.png");
    background-size:100%;
    background-repeat:no-repeat;
    background-position:bottom right;
}

资源：

Answer 4

我已经研究过基于jQuery的解决方案 - 可能不像gilly3发布的解决方案那么优雅;）而且它也更慢，有点臃肿......

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

我使用的标记如下。我正在使用HTML5属性data-bottom-image来识别您将图像浮动到底部的部分。当然，这取决于你想要如何选择正确的section元素，这是不必要的。

<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/

Answer 5

我想它已经解决了。它有效！

使用一点点JavaScript和CSS，我就这样做了：

<强> http://jsfiddle.net/stichoza/aSScx/

一个简单的floatify()函数。

响应。
调整窗口大小不会破坏它。
任何图像宽度/高度。
放置任意数量的文字。

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

Answer 6

仅限CSS解决方案。

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

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

它在不同的屏幕分辨率下播放效果很好。 See demo

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

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

Answer 7

使用它：

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

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

</style>

更改 80％以获得最佳效果。

祝你好运。

Answer 8

这是一个带有一点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();
});

为了消除对剽窃的任何担忧，这个解决方案基于another similar answer我提供了一段时间。

Answer 9

受@ gilly3解决方案启发，直到CSS Exclusions到来的2020年自适应解决方案。

在包含元素上的Flexbox避免了需要固定高度的容器，同时仍确保100％的高度有效
-is [psobject]元素而不是间隔符$var = 1 $var -is [psobject] # -> $false $var = Write-Output 1 $var -is [psobject] # -> $true, due to use of a cmdlet. # You can also test command output directly. (Write-Output 1) -is [psobject] # -> $true
视口单位而不是固定值，以按比例缩放图像（和“间隔”）大小
要在更宽的屏幕上显示最大宽度的图像，请将固定宽度的断点引入图像和间隔物
减去:before内所需的任何垂直边距

div

calc()

Answer 10

无需复杂代码即可工作的仅 CSS 和响应式解决方案。调整浏览器大小，看看神奇的效果：

.wrapper {
  display: flex;
  border: 1px solid;
}

.box {
  text-align: justify;
  font-size: 20px;
}

.float {
  float: right;
  height: 100%;
  margin-left: 15px;
  display: flex;
  align-items: flex-end;
  shape-outside: inset(calc(100% - 100px) 0 0);
}

<div class="wrapper">
  <div class="box">
    <div class="float"><img src="https://picsum.photos/id/1/100/100"></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna
    ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent
    ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas
    hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
  </div>
</div>

更多详情：https://css-tricks.com/float-an-element-to-the-bottom-corner/

_{PS：我是以上文章的作者}

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

10 个答案:

在IE10 +

CSS

我想它已经解决了。它有效！