如何在图像旁边浮动段落而不环绕图像？

发布于 2024-09-25 11:58:53 字数 517 浏览 0 评论 0原文

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

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

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

在这种情况下我几乎迷失了。请向我提出任何建议。我希望两个 div 彼此相邻浮动而不包裹..而不指定框宽度。

任何解决方案..解决方法？

原文

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 width to both img and info but the image is a variable width/height. It does not have specific 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.

Any solution..workaround?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

衣神在巴黎 2024-10-02 11:58:53

无需 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）。即使文本比图像低，这种方法也有效。

You can do this without JS. See my fiddle http://jsfiddle.net/VaSn6/5/

Put the image and paragraph side-by-side:

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

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

I needed something like this that was CMS-friendly and marketing-team friendly (marketers are scared of divs!)

This works down to at least 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.

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.

回复收藏 0 原文

む无字情书 2024-10-02 11:58:53

这里有一些简单的 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>

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>

回复收藏 0 原文

无远思近则忧 2024-10-02 11:58:53

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

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

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

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

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

See: http://jsfiddle.net/9WMzZ/

回复收藏 0 原文

第七度阳光i 2024-10-02 11:58:53

我知道不用 JavaScript 实现这一点的唯一方法是将两个元素包装在一个容器元素中，该元素的“overflow”属性设置为“auto”，浮动图像，并将段落的“overflow”设置为“auto”，以及。

在这里查看它的工作原理： http://jsfiddle.net/leegee/vpjjB/

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

顺便说一句，当您渲染段落和图像时，我更改了标记以使用老式“p”和“img”的相关“语义”元素。

回复收藏 0 原文

二货你真萌 2024-10-02 11:58:53

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

You can do it with some 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>

回复收藏 0 原文

~没有更多了~