html-将图片浮动到右下角,文字环绕

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

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

这是我要完成的示意性示例:

Floating image to the bottom right

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

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

当我在图像上设置float: right时,它向右浮动,但是我无法使其与页面底部对齐。 有什么建议吗?

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

molf asked 2020-02-23T01:33:45Z
8个解决方案
55 votes

使用window.onresize和27595824011511080108097创建一个spacer元素,该元素等于内容的高度减去图像的高度。 然后在图像上使用float: rightclear: 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://CSS的SK.com/B ln WS]

我的演示在容器元素中使用了固定尺寸。 由于这很少是现实情况,因此使用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或您选择的库进行重新设计。 它并不是要成为插件质量代码,而只是用来说明概念。

jsfiddle.net/n5RPV/9

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

顺便说一下,我没有费心尝试支持IE7。

gilly3 answered 2020-02-23T01:34:21Z
6 votes

我认为将来解决该问题的方法将是CSS Exclusions。

CSS排除扩展了先前内容包装的概念   仅限彩车。 ...元素在其内容区域中布置其内联内容,并在其关联的包装上下文中包裹排除区域(-摘自规范)

此msdn文章还解释了排除项

...网络作者现在可以包装文本,使其完全包围   元素,从而避免了浮标的传统限制。   而不是限制元素向左或向右浮动   相对于它们在文档流中的位置,CSS排除项可以是   位于距顶部,底部,左侧或顶部指定距离的位置   包含块的右侧,而保留块的其余部分   文档流。

具有讽刺意味的是,到目前为止,这仅在IE10中有效(请在此处查找wrap-flow:两者均如此)

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

正如您所看到的-即使排除对象的位置是绝对的-在这种情况下,它仍然像float一样起作用:float右下。

关于浏览器支持:

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

PS:有关CSS排除(以及其他类似模型,如CSS区域和CSS Shapes)的最新更新,请访问Adobe Web Platform Team Blog。

Danield answered 2020-02-23T01:35:31Z
2 votes

我已经研究了基于jQuery的解决方案-可能不及gilly3发布的解决方案那么优雅;)而且速度也较慢且有点膨胀。

我的技巧是将两个data-bottom-images追加到该部分,该部分浮动到左侧并隐藏宽度为0的宽度。div中的一个,即与图像具有相同尺寸的指定幽灵元素,将位于另一个div下方 即指定的高度垫片。 该脚本使用while循环来确定ghost元素是否已到达父section元素的底部。 如果没有发生,它将使高度垫片的高度增加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/]

Terry answered 2020-02-23T01:36:10Z
2 votes

可能的CSS解决方案:(仅在chrome中测试)

使用CSS3的flex box属性和background-image属性的组合似乎可以正常工作。 我仅使用CSS就可以使它非常接近。 (它可以工作,但需要稍作调整)此外,这可能不是理想的选择,因为我必须稍微更改标记才能完成此工作。 但是,如果您正在寻找纯CSS解决方案,那么可能值得一试。

这是一个演示-> [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;
}

资源:

  1. [HTTP://CSS-tricks.com/snippets/CSS/啊-贵的-to-flex box/]
  2. [HTTP://Dev.我3.org/CSS网格/CSS-flex box-1/]
Kris Hollenbeck answered 2020-02-23T01:37:01Z
2 votes

我想解决了。 有用!

借助一些JavaScript和CSS,我做到了:

[HTTP://JS fiddle.net/身体差哦咋/ass出现/]

一个简单的floatify()函数。

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

灵感源于:[http://www.csstextwrap.com/]

Stichoza answered 2020-02-23T01:37:56Z
1 votes

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

在不同的屏幕分辨率下播放效果都很好。 参见演示。

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

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

Oriol answered 2020-02-23T01:38:43Z
0 votes

用这个 :

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

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

</style>

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

祝好运。

hesam jaferi answered 2020-02-23T01:39:11Z
0 votes

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

[HTTP://JS fiddle.net/Isherwood/6B VC2/]

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

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

isherwood answered 2020-02-23T01:39:40Z
translate from https://stackoverflow.com:/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around