Floating gambar ke kanan bawah dengan membungkus teks di sekitar

Buat spacer elemen dengan float: right dan tinggi yang sama dengan ketinggian konten minus tinggi gambar. Kemudian menggunakan float: right dan clear: right pada gambar:

<div class="spacer"></div>

<div class="content"></div>

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

http://cssdesk.com/bLNWs

Demo saya menggunakan dimensi tetap dalam wadah elemen. Sejak itu jarang yang realistis kasus ini, mungkin lebih masuk akal untuk menggunakan JavaScript untuk ukuran spacer. Memanggil fungsi ini, lewat referensi untuk spacer elemen ketika dokumen tersebut siap dan selama jendela.onresize acara.

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

Fungsi ini bekerja ([lihat demo](http://jsfiddle.net/n5RPV/9/)), dan dapat di ulang untuk jQuery atau library pilihan. It's tidak dimaksudkan untuk menjadi plug-in kualitas kode, tetapi berfungsi untuk menggambarkan konsep tersebut.

[jsfiddle.net/n5RPV/9](http://jsfiddle.net/n5RPV/9/)

Edit: saya membuat sebuah plugin jQuery versi (github | [demo jsFiddle](http://jsfiddle.net/n5RPV/10/)) yang mendukung floating kiri bawah atau kanan bawah. Hal ini juga mendukung menentukan elemen untuk menyelaraskan bawah dengan.

By the way, saya didn't repot-repot mencoba untuk mendukung IE7.

Saya pikir masa depan dengan cara bagaimana untuk mengatasi masalah ini akan sama dengan CSS Pengecualian.

CSS Pengecualian memperpanjang gagasan konten pembungkus sebelumnya terbatas untuk mengapung. ... Unsur-unsur tata letak mereka inline konten dalam area konten dan membungkus di sekitar daerah eksklusi dalam berhubungan pembungkus konteks (--kutipan dari spec)

Ini baca artikel juga menjelaskan pengecualian

...web penulis sekarang dapat membungkus teks sehingga benar-benar mengelilingi unsur-unsur, sehingga menghindari keterbatasan tradisional mengapung. Bukan membatasi elemen-elemen mengambang baik ke kiri atau ke kanan relatif terhadap posisi mereka dalam dokumen aliran, CSS Pengecualian dapat terletak pada jarak tertentu dari bagian atas, bawah, kiri, atau sisi kanan yang berisi blok, sementara sisa bagian dari aliran dokumen.

Ironisnya, sampai saat ini hanya bekerja di IE10 (mencari bungkus-aliran:baik di sini)

Check out [biola ini][5] di IE10+

Ini adalah apa yang tampak seperti kode:

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

Sehingga anda dapat melihat - meskipun pengecualian adalah benar-benar diposisikan - masih bertindak seperti pelampung - dalam hal ini: float kanan bawah.

Mengenai browser yang mendukung:

Check out situs yang menunjukkan sifat-sifat yang didukung oleh browser (untuk saat ini: hanya IE10+ mendukung bungkus-aliran:kedua )

PS: update Terbaru mengenai CSS pengecualian (dan lain senada modul seperti CSS daerah dan CSS Shapes) dapat ditemukan pada Adobe Web Platform Blog Tim

Saya kira itu's dipecahkan. Ia bekerja!

Dengan sedikit JavaScript dan CSS yang saya lakukan seperti ini:

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

Satu sederhana floatify() fungsi.

• Responsif.
• Mengubah ukuran jendela won't istirahat.
• Setiap gambar lebar/tinggi.
• Menempatkan banyak teks yang anda inginkan.

Ide yang diilhami oleh: http://www.csstextwrap.com/

Mungkin CSS Solusi: (hanya diuji di chrome)

Sepertinya ini mungkin bekerja menggunakan CSS3's flex kotak properties dan kombinasi dari background-image properties. Saya mampu untuk mendapatkan cukup dekat hanya menggunakan CSS. (Bekerja tetapi membutuhkan sedikit tweaking) Juga, ini mungkin tidak menjadi pilihan karena aku tidak harus mengubah markup sedikit untuk membuat karya ini. Tapi mungkin layak dicoba jika anda sedang mencari pure CSS solusi.

Berikut ini adalah Demo -> http://jsfiddle.net/ADSH2/

Markup baru: (tidak jauh berbeda)

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

Sumber:

1. http://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. http://dev.w3.org/csswg/css-flexbox-1/

Saya telah bekerja pada jQuery berbasis solusi — mungkin tidak elegan seperti yang diposting oleh gilly3 meskipun ;) dan itu's juga lebih lambat dan sedikit membengkak...

Saya caranya adalah dengan menambahkan dua <div>s untuk bagian, yang melayang ke kiri dan tersembunyi lebar lebar 0. Salah satu div, yang ditunjuk hantu elemen yang akan memiliki dimensi yang sama seperti gambar, akan diposisikan di bawah div lain yang lebih tinggi yang ditunjuk spacer. Script menggunakan while loop untuk membangun jika hantu elemen telah mencapai bagian bawah dari bagian induk elemen. Jika hal ini tidak terjadi, akan menambah ketinggian tinggi spacer dengan 1, sampai kondisi puas.

Markup saya telah digunakan adalah sebagai berikut. I'm menggunakan HTML5 atribut data-bawah-gambar` untuk mengidentifikasi bagian-bagian yang telah anda gambar yang akan melayang ke bawah. Tentu saja hal ini dibuang, tergantung pada bagaimana anda ingin memilih untuk memperbaiki bagian elemen.

<section id="c1" data-bottom-image>
    <h2>...</h2>
    <p>...</p>

</section>

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

Dan di sini adalah kerja Biola: http://jsfiddle.net/teddyrised/xmkAP/5/

CSS-satunya Solusi.

Dengan menggunakan media query satu dapat mencapai tata letak ini.

HTML

<section>
  <h2>...</h2>
  <p>... ...</p>
  <p>... ...</p>

  ...

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

Hal ini memainkan dengan baik pada resolusi layar yang berbeda. [Lihat demo][1].

Satu telah untuk bermain/menyesuaikan CSS media queries serta posisi gambar dalam markup dalam rangka untuk itu untuk bekerja.

CSS media query didukung di Firefox 3.5+, Opera 7+, Safari 3+, Chrome dan IE9+. Untuk versi IE yang lebih tua satu ini dapat digunakan untuk memperbaiki: http://code.google.com/p/css3-mediaqueries-js/

Berikut ini's solusi ringan dengan sedikit jQuery:

http://jsfiddle.net/isherwood/6BvC2/

<section class="flagpole">
    <div class="pole"></div>

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

Untuk menghilangkan kekhawatiran tentang plagiarisme, solusi ini didasarkan pada lain yang mirip jawaban yang saya berikan beberapa waktu lalu.

gunakan ini :

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

</section>


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

perubahan 80% untuk mendapatkan hasil terbaik.

Good Luck.