Question

我想在图像旁边浮动一个段落，但不包裹图像。像这样：

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 */
}

问题是，如果我将宽度设置为img和info，但图像是可变宽度/高度，我可以这样做。它没有特定的宽度/高度。

在这种情况下，我几乎迷失了。请向我推荐任何东西。我希望两个div在没有包装的情况下彼此相邻浮动..而不指定盒子宽度。

任何解决方案......工作？

Answer 1

你可以在没有JS的情况下做到这一点。看我的小提琴http://jsfiddle.net/VaSn6/5/

将图像和段落并排放置：

<img />
<p>text</p>

使用CSS：

img {
    float: left;
    margin-right: 10px;
    clear:both;
}
p {
    margin-left: 0px;
    overflow:auto;
    display:block;

}

我的jsfiddle将示例扩展为清除段落和右对齐图像。

我需要这样的CMS友好和营销团队友好（营销人员害怕div！）

这至少可以解决IE8。

如果你需要文本旁边的垂直居中的图片，你需要一些div：http://jsfiddle.net/VaSn6/12/这只会使文字的长文本比文字更长。

或者如果您对CSS表格没问题，我会选择http://jsfiddle.net/sY4H8/1/（也可以使用IE8）。即使文本不如图像高，也能正常工作。

Answer 2

Here is some simple CSS for doing this job.

＆＃13;

img {
    float: left;
    border: 1px solid black;
    margin: 5px 10px 10px 0px;
}

＆＃13;

<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>

＆＃13;

Answer 3

只浮动图像，而不是文本段落：

img {
    float: left;
    margin-right: 10px;
}

p {
    font-family: Arial;
    font-size: 13px;
    line-height: 1.3em;
}

请参阅：http://jsfiddle.net/9WMzZ/

Answer 4

我知道在没有JavaScript的情况下执行此操作的唯一方法是将两个元素包装在一个容器元素中，其'overflow'属性设置为'auto'，浮动图像，并将段落的'溢出'设置为'汽车'，以及。

在此处查看：http://jsfiddle.net/leegee/vpjjB/

您还可以在段落上设置百分比宽度，并将它们浮动到图像的另一侧，但我不确定这是您问题的良好答案。

顺便说一下，当你渲染段落和图像时，我改变了标记，使用了老式'p'和'img'的相关'语义'元素。

Answer 5

你可以用一些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>

如何在不包装图像的情况下在图像旁边浮动段落？

5 个答案: