CSS 解决方案，将图像向右浮动，但下方没有文本流动
我想知道是否有 CSS 解决方案，其中我有如下代码，并且可能有也可能没有图像浮动到右侧。我希望文本仅流动到图像的左侧，因此文本不会在图像下方流动，几乎就像它形成自己的列一样。
<div class="content">
<h1>Page title</h1>
<img src="path/to/image">
<p>Some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here</p>
<p>More content here</p>
</div>
有时可能有不止一张图像（紧接着另一张图像），或者根本没有。本质上我想知道是否有一个纯CSS解决方案而不是单独的列/div（并避免js）。我有预感，这不可能……！
更复杂的是，它必须兼容所有主要浏览器（包括，呃，ie6）。
I'd like to know if there is a solution with CSS where I have code like below, and there may or may not be an image floating to the right. I want the text to flow only as far as the left of the image(s), so the text doesn't flow underneath them, almost like it forms its own column.
<div class="content">
<h1>Page title</h1>
<img src="path/to/image">
<p>Some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here, some content here</p>
<p>More content here</p>
</div>
Sometimes there might be more than one image (just after the other), or none at all. Essentially I'm wondering if there is a pure css solution instead of separate columns/divs (and avoiding js). I have a feeling it isn't possible...!
And to complicate things further, it has to be compatible in all the major browsers (including, urgh, ie6).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
仅使用CSS：
在这里玩它： http://jsfiddle.net/SebastianPataneMasuelli/mPTRx/
ps如果您使用多个图像，请使用
img { float: right;明确：正确； }with css only:
play with it here: http://jsfiddle.net/SebastianPataneMasuelli/mPTRx/
p.s. if you're using more than one image, use
img { float: right; clear: right; }谢谢各位！
我已经改编了 Sebastian 的代码，但承认必须涉及 jQuery，因为我并不总是希望右侧有间隙。
以下是我解决这个问题的方法：
HTML（顺便说一句，我并不完全负责某些标记，它们都在 Wordpress 站点内！）：
jQuery（更复杂代码的一部分）：
我希望这对某人有用！感谢塞巴斯蒂安的提醒:)
Thanks folks!
I have adapted Sebastian's code, but conceded that jQuery has to be involved, as I don't always want there to be a gap on the right.
Here's how I solved it:
HTML (BTW I'm not fully responsible for some of the markup, it is all within a Wordpress site!):
jQuery (part of more complex code):
I hope this is useful to somebody! Thanks Sebastian for the heads up :)
应该有效。
我让你尝试理解： https://developer.mozilla.org/en/CSS/block_formatting_context< /a>;)
should work.
I let you try to understand: https://developer.mozilla.org/en/CSS/block_formatting_context ;)
我认为没有办法在不包含额外 div 的情况下做到这一点。
解决方案 1：
这会在图像下方留下大量边距，从而防止文本在下方流动。您可能需要在某些浏览器中定义 div 的高度。
解决方案 2：
这需要 2 个 div，一个用于使图像向右浮动，另一个用于使文本向左浮动。两者都需要定义宽度。
I don't think there is a way to do it without including extra divs.
Solution 1:
This drops a massive margin below the image which prevents the text from flowing underneath. You may need to define a height for the div in some browsers.
Solution 2:
This requires 2 divs, one to hold your images floated right and one to hold your text floated left. Both need a defined width.