在那里，我正在为某人的介绍创建类似于下面的屏幕截图的内容。但是在底部我想对齐图像和底部的段落，所以我会让文本像第二个图像一样环绕图像。这在 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>
谢谢！
您可以在 css 中使用“float:left”。
img {
float:left;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
除非您像@ashis-kumar's answer那样将图像放在文本中间，否则仅使用 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>以便更容易找到它的偏移量。然后它为图像旁边的所有单词创建另一个元素。然后它遍历它们，直到找到正确数量的单词进入它（如果空间太多或不够，它是递归的）。可能有一些优化可以完成，但它非常快。
为您的图像添加一个“浮动”选择器：
<img class="ppl-proj" src="images/who/pure-systems.png" style="float:left; padding-right:10px;">
这会让你开始。您可能需要稍微调整一下，但如果您查找如何使用浮点数，您就会明白。
这是一个很好的学习资源：
我是这样做的：<input type='button' style='position:fixed' top:94%; left:82%; width:100px' value='
你可以这样定位<div>，<p>等等。