CSS 如何在不包裹图像的情况下在图像旁边浮动段落？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3819117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to float paragraph next to image without wrapping the image?
提问by Ahmad Fouad
I want to float a paragraph next to image, but without wrapping the image. Like this:
我想在图像旁边浮动一个段落，但不包装图像。像这样：
div.img {
float: left;
display: block;
margin: 15px 2% 0 2%;
width: 26%; /* I cannot use that */
}
div.info {
float: right;
display: block;
margin: 15px 2% 0 2%;
width: 66%; /* The width should be variable */
}
The problem is that I can do it if I set widthto both img and info but the image is a variable width/height. It does not have specific width/height.
问题是，如果我将width设置为 img 和 info 但图像是可变的 width / height，我就可以做到。它没有特定的宽度/高度。
I am almost lost in this situation. Please suggest to me anything.I want both divs to float next to each other without wrapping .. without specifying box width.
在这种情况下，我几乎迷失了方向。请向我提出任何建议。我希望两个 div 彼此相邻浮动而无需包装 .. 无需指定框宽度。
Any solution..workaround?
任何解决方案..解决方法？
采纳答案by Adam
You can do it with some JavaScript:
你可以用一些 JavaScript 来做到：
document.getElementById('content').style.width = (
document.getElementById('wrapper').offsetWidth -
document.getElementById('logoimg').offsetWidth - 10
) + "px";#logoimg { float: left; }
#content { float: left; padding-left: 5px; margin:0; }
.clearer { clear: both; }<div id="wrapper">
<img id="logoimg" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />
<div id="content">A Fehér Kéménysepr?ket is bevonta a Fidesz a bajban lév? hitelesek megsegítésér?l szóló t?rvényjavaslat kidolgozásába. A Rogán Antal és Kósa Lajos által bejelentett t?rvénycsomagról konkrétumokat továbbra sem tudni, a politikusok az egyeztetések lezártával ígérik nyilvánosságra hozni az ?sszefésült javaslatokat. A tárgyalásba bevont, magát civil egyesületként definiáló Fehér Kéménysepr?k szervezet a radikális jobb- és baloldalon is igen népszer?, rendezvényein az Antifasiszta Liga és a kommunisták mellett gárdisták is felbukkannak. A Fidesz szerint a kéménysepr?k jól ismerik az érintettek problémáit. Az asztalnál ül? egy másik szervezet annyira jól ismeri a problémákat, hogy megoldásként javasolja: az elmúlt években elszenvedett árfolyamveszteséget a bankok "adják vissza" a hiteleseknek.</div>
<div class="clearer"></div>
</div>回答by Nils
You can do this without JS. See my fiddle http://jsfiddle.net/VaSn6/5/
你可以在没有 JS 的情况下做到这一点。看我的小提琴http://jsfiddle.net/VaSn6/5/
Put the image and paragraph side-by-side:
并排放置图像和段落：
<img />
<p>text</p>
With CSS:
使用 CSS：
img {
float: left;
margin-right: 10px;
clear:both;
}
p {
margin-left: 0px;
overflow:auto;
display:block;
}
My jsfiddle extends the example to clearing paragraphs and right-aligned images.
我的 jsfiddle 将示例扩展到清除段落和右对齐的图像。
I needed something like this that was CMS-friendly and marketing-team friendly (marketers are scared of divs!)
我需要这样的东西，它对 CMS 友好且对营销团队友好（营销人员害怕 div！）
This works down to at least IE8.
这至少适用于 IE8。
If you need vertically-centered images next to text, you'll need some divs: http://jsfiddle.net/VaSn6/12/This will only vertically center longer text than images.
如果您需要在文本旁边垂直居中的图像，您将需要一些 div：http: //jsfiddle.net/VaSn6/12/这只会垂直居中比图像更长的文本。
Or if you're ok with CSS tables, I'd go with http://jsfiddle.net/sY4H8/1/(also ok down to IE8). That works even if the text is less tall than the image.
或者，如果你对 CSS 表没问题，我会去http://jsfiddle.net/sY4H8/1/（也可以到 IE8）。即使文本比图像低，这也有效。
回答by Hasan Hafiz Pasha
Here is some simple CSS for doing this job.
img {
float: left;
border: 1px solid black;
margin: 5px 10px 10px 0px;
}<p>
<img src="http://scalabilitysolved.com/content/images/2014/May/stackoverflow.png" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident suscipit, aspernatur aliquid ea, vel distinctio cupiditate reprehenderit! Laborum amet, accusantium nesciunt repudiandae, ad illo dignissimos maiores, dolorum est aliquam eveniet.
</p>回答by Yi Jiang
Only float the image, not the paragraph of text:
只浮动图像，而不是文本段落：
img {
float: left;
margin-right: 10px;
}
p {
font-family: Arial;
font-size: 13px;
line-height: 1.3em;
}
回答by LeeGee
The only way I know to do it without JavaScript is to wrap your two elements in a container element whose 'overflow' property is set to 'auto', float the image, and set the 'overflow' of the paragraph to 'auto', as well.
我知道在没有 JavaScript 的情况下执行此操作的唯一方法是将您的两个元素包装在一个容器元素中，该元素的“溢出”属性设置为“自动”，浮动图像，并将段落的“溢出”设置为“自动”，以及。
See it working here: http://jsfiddle.net/leegee/vpjjB/
看到它在这里工作：http: //jsfiddle.net/leegee/vpjjB/
You could also set a percentage-width on the paragraphs and float them to the opposite side as the image, but I am not sure that is a good answer to your question.
您还可以在段落上设置百分比宽度并将它们浮动到图像的另一侧，但我不确定这是否能很好地回答您的问题。
By the way, as you are rendering paragraphs and images, I changed the mark-up to use the relevant 'semantic' elements of old-fashioned 'p' and 'img'.
顺便说一下，当您渲染段落和图像时，我更改了标记以使用老式“p”和“img”的相关“语义”元素。
