使用 CSS 强制 img 和 p 分成两列

Posted 2023-03-06

【中文标题】使用 CSS 强制 img 和 p 分成两列

【英文标题】：Using CSS to force img and p to split into two columns

【发布时间】：2014-09-25 00:30:58

【问题描述】：

我有一个动态生成的内容，它生成一个img 和一些伴随的ps。我想强制 img 占据一列，而将其余的 ps 放在另一列中。我通过浮动img 并在底部添加填充以清除文本并将其强制进入第二列来做到这一点。

这很好用，但在较小的屏幕尺寸下会中断。有没有更好的方法来实现这一目标？

实际上，我想将clear: below 应用于img……但当然这是不可能的。

这里有一个问题：http://jsfiddle.net/EFw6w/

CSS：

.two-col 
    border: 1px solid #ccc;
    padding: 10px;
    float: left;
    

    .two-col p 

        

    .two-col p img 
        width: 45%;
        padding-right: 5%;
        float: left;
        padding-bottom: 30%;
        

html：

<div class="two-col">
    <p><img src="http://placekitten.com/g/200/300" /></p>
    <p>Duis laoreet sagittis ipsum, volutpat interdum dui gravida ac. Integer mattis facilisis eleifend. Sed ullamcorper leo sit amet enim egestas sagittis. Fusce gravida accumsan placerat. Ut in ultrices mi, ut posuere sem. Vivamus bibendum mollis lectus vitae scelerisque. Ut faucibus tortor leo, nec ullamcorper erat cursus nec.</p>
    <p><a href="#">Kittens</a></p>
</div>

任何想法表示赞赏......

【问题讨论】：

我假设您不能只将两个段落元素与文本和链接放在单独的 div 中？

我不明白你为什么不能清除？

看看这个：jsfiddle.net/EFw6w/8

我更新了我的答案，抱歉我一开始误解了这个问题。

@MelanciaUK 谢谢，但这不是响应式解决方案。当文本变得比 img 长时，它会中断。我需要清除 img 下面的内容，这样它下面就不会出现任何内容。

【参考方案1】：

您可以将所有 <p> 元素包含在一个 div 中，并将您的 <img> 包含在另一个 div 中。然后将宽度（45%）设置为 div 的：

http://jsfiddle.net/2b6k2/4/

<div class="two-col">
    <div id="first-col" class="column">
        <img src="http://placekitten.com/g/200/300" />
    </div>
    <div id="second-col" class="column">
        <p>Duis laoreet sagittis ipsum, volutpat interdum dui gravida ac. Integer mattis facilisis eleifend. Sed ullamcorper leo sit amet enim egestas sagittis. Fusce gravida accumsan placerat. Ut in ultrices mi, ut posuere sem. Vivamus bibendum mollis lectus vitae scelerisque. Ut faucibus tortor leo, nec ullamcorper erat cursus nec.</p>
        <p><a href="#">Kittens</a></p>
    </div>
</div>

结果：

【讨论】：

这很好，但我不能在文本周围添加额外的标记。我正在使用 Wordpress，图像和文本都是在

【参考方案2】：

这里是 js fiddle 的一个例子，

Click Here

对不起，我误解了这个问题。如果我错了，请纠正我，但您正试图阻止文本以不同的窗口大小换行？

P 是一个块元素，所以你只需要将它浮动，让它保持在 img 旁边，然后给它一个宽度，这样它就不会知道wrap。

这是我在你的 CSS 上所做的更改。

  .two-col p 
     width:50%;
     float: left;
        

    .two-col img 
        width: 45%;
        float: left;

        

【参考方案3】：

因为你有动态生成的元素，你可以使用这个 CSS-

.two-col 
    border: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;


.two-col p 
    display: inline;


.two-col p:after
    content: "\A";
    white-space: pre;


.two-col :first-child 
    float: left;

制作ps inline 将为您提供响应式布局。 content: "\A" 将在每个段落的末尾添加一个新行。如果您希望段落之间有更多空间，可以使用content: "\A\A"。

【讨论】：

嗯，谢谢，但我不明白这如何迫使没有内容落入img 元素之下？ @aniskhan001

img 现在浮动。因为所有段落现在都显示为inline，所以它保持了所需的格式。

哦，真的很抱歉。那是我的错。在.two-col 和:first-child 之间需要一个空格。之前我写错了.two-col:first-child。应该是.two-col :first-child。我也确定了答案。谢谢！

不正是你想要的结果吗？图片在左边，文字在右边。

缩小页面使其变窄。文字漂浮在图像下方。这正是 OP 想要避免的。