如何在不包裹图片的情况下将段落浮动到图片旁边?[英] How to float paragraph next to image without wrapping the image?

本文是小编为大家收集整理的关于如何在不包裹图片的情况下将段落浮动到图片旁边?的处理方法,想解了如何在不包裹图片的情况下将段落浮动到图片旁边?的问题怎么解决?如何在不包裹图片的情况下将段落浮动到图片旁边?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我想在图像旁边浮动一个段落,但不要包裹图像.这样:

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,我可以做到这一点,但是图像是A 可变宽度/高度.它没有特定的宽度/高度.

我在这种情况下几乎迷失了.请向我建议任何东西.我希望两个divs彼此相邻漂浮而无需包装..

有任何解决方案..工作吗?

推荐答案

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

其他推荐答案

您可以在没有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友好且营销团队友好(营销人员害怕Divs!)

这至少为IE8.

如果您需要文本旁边的垂直计算图像,则需要一些divs: http://http://jsfiddle .

或者如果您可以使用CSS表,我会选择 http://jsfiddle.net/SY4H8/1/(也可以使用IE8).即使文本比图像高的文本也有效.

其他推荐答案

这是做这项工作的简单CSS.

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>

本文地址:https://www.itbaoku.cn/post/567441.html