Question

我有一个固定大小的元素，例如一个图像，我希望与包含描述它的段落的元素一起显示。

我想要的结果是段落将尽可能宽，如果容器变小则会缩小。我想在段落上施加最小宽度，以便当它们达到该宽度并变小时，它们将向下到达下一行并且基本上成为块元素，而图像将在该行中居中。

我还希望在不使用媒体查询的情况下实现这一点，因为每篇文章都可能有不同尺寸的图片。

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

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

这个小提琴表现了我想要的方式，除非你缩小容器。一旦容器变得太小，段落将进入下一行。我想要的是段落缩小与容器缩小，直到段落达到200px为例。如果容器变小，它应该转到下一行。

Answer 1

你可以用一些max-width，min-width和calc来做。尝试将此添加到您的.info类

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

请在此处查看：http://jsfiddle.net/wu9ekLm4/1/

流体元素＆＃34;成为一个块＆＃34;至少宽度

1 个答案: