1

そこで、人物紹介用に下のスクリーンショットのようなものを作成しています。しかし、一番下で画像と段落を一番下に揃えたいので、2番目の画像のようにテキストを画像の周りに折り曲げます。それはCSSで可能ですか？

<div class="ppl-detail">
     <img class="ppl-proj" src="images/who/pure-systems.png">
     <p class="ppl-text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo.</p>
</div>

ありがとうございました！ここに画像の説明を入力 ここに画像の説明を入力

4

4 に答える 4

1

@ashis-kumarの回答のようにテキストの真ん中に画像を配置しない限り、これはCSSだけでは不可能です。私はいくつかのJavaScriptを書きました（サードパーティのライブラリは必要ありませんが、jQueryで動作するように簡単に書き直すことができます）：

var util = {
    iterations: 0,
    fontSize: 20,
    wrapWords: function(el) {
        var words = el.textContent.split(' ');
        for ( var i = 0, l = words.length; i < l; ++i ) {
            words[i] = '<span class="word">' + words[i] + ' </span>';
        }
        el.innerHTML = words.join('');
        return document.querySelectorAll('span.word');
    },
    checkOffsets: function(words, img, newContainer, origContainer) {
        var top = img.offsetTop;
        for ( var i = 0, l = words.length; i < l; ++i ) {
            origContainer.appendChild(words[i]);
        }
        origContainer.appendChild(newContainer);
        for ( i = 0, l = words.length; i < l; ++i ) {
            var word = words[i];
            if ( word.offsetTop + word.offsetHeight >= top ) {
                newContainer.appendChild(word);
            }
        }
        if ( Math.abs(img.offsetTop - newContainer.offsetTop) > this.fontSize || img.offsetTop < newContainer.offsetTop ) {
            this.iterations++;
            if ( this.iterations < 10 ) {
                this.checkOffsets(words, img, newContainer, origContainer);
            }

        }
    }
};

var img = document.querySelector('img');
var p = document.querySelector('p');
var words = util.wrapWords(p);
var pushContainer = document.createElement('div');
pushContainer.classList.add('push');
p.appendChild(pushContainer);


util.checkOffsets(words, img, pushContainer, p);

実際に見る

簡単に書きましたが、基本的に行うことは、段落内のすべての単語を a<span>で囲み、オフセットを見つけやすくすることです。次に、画像の隣にあるすべての単語の別の要素を作成します。次に、適切な数の単語が見つかるまでそれらを調べます (スペースが多すぎる場合や十分でない場合は再帰的です)。おそらくいくつかの最適化を行うことができますが、それはかなり迅速です。

于 2013-08-02T16:18:11.630 に答える