Question

在那里，我正在为一个人的介绍创建类似下面的截图。但是在底部我想将图像和段落对齐在底部，所以我会将文本环绕图像，就像第二个图像一样。这有可能在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>

谢谢！ enter image description here

Answer 1

你可以在css中使用“float：left”。

img {
   float:left;
   border:1px dotted black;
   margin:0px 0px 15px 20px;
}

选中此http://jsfiddle.net/26WZe/

Answer 2

单独使用CSS是不可能的，除非你打算将图像放在文本的中间，如@ ashis-kumar的答案。我写了一些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);

See it in action

我写得很快，但它基本上做的是用<span>包装段落中的所有单词，以便找到它的偏移更容易。然后它为图像旁边的所有单词创建另一个元素。然后它会通过它们直到它找到正确的单词数量（如果有太多空间或不够的话，它是递归的）。可能有一些优化可以完成，但它很快。

Answer 3

为图片添加“浮动”选择器：

<img class="ppl-proj" src="images/who/pure-systems.png" style="float:left; padding-right:10px;">

那会让你开始。您可能需要稍微调整一下，但是如果您查找如何使用浮点数，您就会明白它。

这是一个很好的学习资源：

http://css.maxdesign.com.au/floatutorial/

Answer 4

我是这样做的：<input type='button' style='position:fixed' top:94%; left:82%; width:100px' value=' 您可以通过<div>，<p>等方式定位。

如何在底部对齐<img/>和<p>标签？</p>

4 个答案:

See it in action