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

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

这是一个简单的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>

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 来做到这一点：

\n\n

\r\n

\r\n

document.getElementById(\'content\').style.width = (\r\n    document.getElementById(\'wrapper\').offsetWidth -\r\n    document.getElementById(\'logoimg\').offsetWidth - 10\r\n) + "px";

\r\n

#logoimg { float: left; }\r\n#content { float: left; padding-left: 5px; margin:0; }\r\n.clearer { clear: both; }

\r\n

<div id="wrapper">\r\n<img id="logoimg" src="http://i.creativecommons.org/l/by/3.0/88x31.png" />\r\n    <div id="content">A Feh\xc3\xa9r K\xc3\xa9m\xc3\xa9nysepr\xc5\x91ket is bevonta a Fidesz a bajban l\xc3\xa9v\xc5\x91 hitelesek megseg\xc3\xadt\xc3\xa9s\xc3\xa9r\xc5\x91l sz\xc3\xb3l\xc3\xb3 t\xc3\xb6rv\xc3\xa9nyjavaslat kidolgoz\xc3\xa1s\xc3\xa1ba. A Rog\xc3\xa1n Antal \xc3\xa9s K\xc3\xb3sa Lajos \xc3\xa1ltal bejelentett t\xc3\xb6rv\xc3\xa9nycsomagr\xc3\xb3l konkr\xc3\xa9tumokat tov\xc3\xa1bbra sem tudni, a politikusok az egyeztet\xc3\xa9sek lez\xc3\xa1rt\xc3\xa1val \xc3\xadg\xc3\xa9rik nyilv\xc3\xa1noss\xc3\xa1gra hozni az \xc3\xb6sszef\xc3\xa9s\xc3\xbclt javaslatokat. A t\xc3\xa1rgyal\xc3\xa1sba bevont, mag\xc3\xa1t civil egyes\xc3\xbcletk\xc3\xa9nt defini\xc3\xa1l\xc3\xb3 Feh\xc3\xa9r K\xc3\xa9m\xc3\xa9nysepr\xc5\x91k szervezet a radik\xc3\xa1lis jobb- \xc3\xa9s baloldalon is igen n\xc3\xa9pszer\xc5\xb1, rendezv\xc3\xa9nyein az Antifasiszta Liga \xc3\xa9s a kommunist\xc3\xa1k mellett g\xc3\xa1rdist\xc3\xa1k is felbukkannak. A Fidesz szerint a k\xc3\xa9m\xc3\xa9nysepr\xc5\x91k j\xc3\xb3l ismerik az \xc3\xa9rintettek probl\xc3\xa9m\xc3\xa1it. Az asztaln\xc3\xa1l \xc3\xbcl\xc5\x91 egy m\xc3\xa1sik szervezet annyira j\xc3\xb3l ismeri a probl\xc3\xa9m\xc3\xa1kat, hogy megold\xc3\xa1sk\xc3\xa9nt javasolja: az elm\xc3\xbalt \xc3\xa9vekben elszenvedett \xc3\xa1rfolyamvesztes\xc3\xa9get a bankok "adj\xc3\xa1k vissza" a hiteleseknek.</div>\r\n    <div class="clearer"></div>\r\n</div>

\r\n

\r\n

\r\n

\n