以最小寬度「變爲塊」的流體元素

我有一個固定大小的元素，例如一個圖像，我想在其中包含描述它的段落的元素旁邊顯示。以最小寬度「變爲塊」的流體元素

我想要的結果是，段落會像它們需要的那樣寬，如果容器變小，會收縮。我想在段落上施加最小寬度，以便當它們達到該寬度並且變小時，它們將下降到下一行，並且基本上成爲塊元素，而圖像將在該行中居中。

我也希望這種情況發生時不使用媒體查詢，因爲每篇文章可能有不同大小的圖像。

當我看到轉到下一行時，我的意思是段落將出現在圖片下方，就好像圖片和段落都是塊元素一樣。

<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爲止。然後如果容器變小，它應該到下一行。

來源

2014-09-25 TreeTree

你能否澄清「轉到下一行」？ – Firedrake969 2014-09-25 22:36:31

你還沒有添加任何媒體查詢到您的CSS。如果您希望元素在特定的視口寬度下執行某些操作，則需要使用媒體查詢來指定該行爲。 – 2014-09-25 23:08:36

@ialarmedalien我希望在沒有媒體查詢的情況下完成此操作，因爲每篇文章都會有不同大小的圖片。 – TreeTree 2014-09-25 23:45:31

你可以做一些最大寬度，最小寬度和計算。嘗試增加了此信息。信息類

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

看看這裏：http://jsfiddle.net/wu9ekLm4/1/

來源

2014-09-26 00:00:55

我會在解決縮小的問題時考慮這個解決方案。然而這引起了另一個問題，即一旦它落在圖像下面，該段落就不適合整個寬度。 http://jsfiddle.net/wu9ekLm4/2/ – TreeTree 2014-09-26 00:35:15

以最小寬度「變爲塊」的流體元素

回答

相關問題