html - 使用 CSS 强制 img 和 p 拆分为两列

Question

我有一个动态生成的内容，它生成一个 img 和一些随附的 p。我想强制 img 占用一列并将其余的 p 放在另一列中。我通过 float img 并在底部添加填充以清除文本并将文本强制放入第二列来完成此操作。

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

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

这是一个 fidde: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>

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

Answer 1

您可以附上您所有的 <p>元素到一个 div 中，然后你的 <img>进入另一个分区。然后将宽度 (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>

结果: