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

Question

我有一个动态生成的内容，它生成一个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>

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

Answer 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>

结果：

Answer 2

这里是 js fiddle 的一个例子，

Click Here

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

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

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

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

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

        }

Answer 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"。