50

段落と見出しを含むテキスト コンテナーがあります。ページの下部で、ページの右側に画像をフロートさせたいのですが、テキストは画像を囲みます。画像の下部は、最後の段落の下部と同じ高さにする必要があります。

ページ幅は可変 (レスポンシブ) ですが、画像のサイズは固定されています。HTML と CSS でこれを達成することは可能ですか (CSS3 は問題ありません)。そうでない場合、最小限の Javascript で実行できますか?

これが私が達成したいことの概略的な例です:

右下のフローティング画像

HTML は現在このようになっていますが、必要に応じて変更できます。画像がドキュメントのどこにあるかは特に気にしません。代わりに背景画像を使用しても問題ありません。

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

画像を設定float: rightすると、右に浮きますが、ページの下部に合わせることができません。提案？

編集：私が得た最も近いものはこれです... :-)

4

10 に答える 10

2

解決したのでしょう。できます！

少しの JavaScript と CSS を使用して、次のようにしました。

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

1つのシンプルなfloatify()機能。

  • レスポンシブ。
  • ウィンドウのサイズを変更しても壊れません。
  • 任意の画像の幅/高さ。
  • 好きなだけテキストを入れてください。

着想を得たアイデア: http://www.csstextwrap.com/

于 2013-11-13T00:58:05.027 に答える
2

私は jQuery ベースのソリューションに取り組んできました — おそらく gilly3 によって投稿されたものほどエレガントではありません;) また、遅くて少し肥大化しています...

私の秘訣は<div>、セクションに 2 つの s を追加することです。セクションは左にフロートされ、幅 0 の非表示の幅になります。画像と同じ寸法を持つ指定されたゴースト要素である div の 1 つは、別の div の下に配置されます。それが指定の高さスペーサーです。このスクリプトは、while ループを使用して、ゴースト要素が親セクション要素の下部に到達したかどうかを確認します。これが発生していない場合は、条件が満たされるまで高さスペーサーの高さを 1 ずつ増やします。

私が使用したマークアップは次のとおりです。HTML5 属性data-bottom-imageを使用して、画像を下に浮かせるセクションを識別しています。もちろん、正しいセクション要素をどのように選択したいかによっては、必須ではありません。

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

于 2013-11-06T19:54:06.557 に答える
1

@gilly3 のソリューションにインスパイアされた 2020 年のレスポンシブ ソリューションで、CSS 除外が登場するまで。

  1. 高さが 100% であることを保証しながら、固定高さのコンテナーを必要としないように要素を含む Flexbox を使用する
  2. :beforeスペーサーの代わりの要素div
  3. 画像のサイズ (および「スペーサー」) に比例して固定値の代わりにビューポート単位
  4. より広い画面で最大幅の画像を表示するには、固定幅のブレークポイントを画像とスペーサーの両方に導入します
  5. 必要な垂直マージンを差し引きますcalc()

.container {
  display: flex;
}

img {
  float: right;
  clear: right;
  margin: 20px 0 0 20px;
  height: 30vw;
  
  @media (min-width: 1200px) {
    height: 400px;
  }
}

.container-inner:before {
  content: "";  
  float: right;
  height: calc(100% - 30vw - 20px);
  
  @media (min-width: 1200px) {
    height: calc(100% - 400px - 20px);
  }
}
<div class="container">
  <div class="container-inner">
    <img src="https://picsum.photos/200" />
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus ab, doloremque quasi, obcaecati aspernatur nam possimus harum architecto odit molestiae pariatur aliquid necessitatibus, corrupti mollitia provident quis quam eligendi qui.</p>
  </div>
</div>

于 2020-12-08T20:04:34.777 に答える
0

これを使って ：

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

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

</style>

最良の結果を得るには80%を変更します。

幸運を。

于 2013-11-12T08:08:07.713 に答える
0

これは、少しの 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();
});

盗作に関する懸念を払拭するために、この解決策は、私がしばらく前に提供した別の同様の回答に基づいています.

于 2013-11-12T15:16:07.883 に答える