html - 最小宽度为 "becomes a block"的流体元素

Question

我有一个固定大小的元素，例如一张图片，我想将其与包含描述它的段落的元素一起显示。

我想要的结果是段落将尽可能宽，如果容器变小，段落将缩小。我想在段落上施加一个最小宽度，这样当它们达到该宽度并变小时，它们将向下移动到下一行并实质上成为一个 block 元素，而图像将在行中居中。

我也希望在不使用媒体查询的情况下发生这种情况，因为每篇文章可能有不同大小的图像。

当我看到转到下一行时，我的意思是段落将出现在图像下方，就好像图像和段落都是 block 元素一样。

http://jsfiddle.net/wu9ekLm4/

<article>
    <section class = "media"></section>
    <section class = "info">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>
</article>

article {
    border:1px solid black;
    padding:1px 0;
    text-align:center;
}

.media {
    background:orange;
    width:200px;
    height:200px;
    display:inline-block;
}

.info {
    background:yellow;
    padding:10px;
    margin:0;
    display:inline-block;
    vertical-align:top;
    min-width:200px;
}

这个 fiddle 的行为符合我的要求，除非您正在缩小容器。一旦容器变得太小，该段落将转到下一行。例如，我想要的是让段落随容器一起缩小，直到段落达到 200px。如果容器变小，它应该转到下一行。

Answer 1

您可以使用一些最大宽度、最小宽度和计算来完成。尝试将其添加到您的 .info 类中

.info{
    max-width: calc(100% - 250px);
    min-width: 200px;
}

在这里查看:http://jsfiddle.net/wu9ekLm4/1/