Css使用最小寬度的默認寬度，但增長到適合內容

我有一個容器，我想有一個min-width的250px和默認寬度500px。但是，如果它內部的內容變得大於500px我希望它增長以適應該內容。Css使用最小寬度的默認寬度，但增長到適合內容

我該怎麼做？

.e 
 
{ 
 
    font-size:20px; 
 
} 
 
.viewport1, .viewport2 
 
{ 
 
    border-width:1px; 
 
    border-color:#000000; 
 
    border-style:solid; 
 
    padding:20px; 
 
} 
 
.viewport1 
 
{ 
 
    width:300px; 
 
} 
 
.viewport2 
 
{ 
 
    width:800px; 
 
} 
 
.root 
 
{ 
 
    background-color:#FFCCCC; 
 
    min-width:400px; 
 
    max-width:600px; 
 
    padding:20px; 
 
} 
 
.colFixed 
 
{ 
 
    background-color:#CCFFFF; 
 
    width:200px; 
 
    float:right; 
 
    height:150px; 
 
    padding:20px; 
 
} 
 
.colFluid 
 
{ 
 
    background-color:#FFCCFF; 
 
    overflow:hidden; 
 
    padding:20px; 
 
}

<div class="viewport1"> 
 
    <p class="e">Viewport 1: Demonstrates min-width</p> 
 
<div class="root"> 
 
    <div class="colFixed"></div> 
 
    <div class="colFluid"> 
 
     <img src="http://placehold.it/20x150"> 
 
    </div> 
 
</div> 
 
</div> 
 
    
 
<div class="viewport2"> 
 
    <p class="e">Viewport 2: Demonstrates default width</p> 
 
<div class="root"> 
 
    <div class="colFixed"></div> 
 
    <div class="colFluid"> 
 
     <img src="http://placehold.it/200x150"> 
 
    </div> 
 
</div> 
 
    </div> 
 
    
 
<div class="viewport2"> 
 
    <p class="e">Viewport 2: But it should resize to the picture</p> 
 
<div class="root"> 
 
    <div class="colFixed"></div> 
 
    <div class="colFluid"> 
 
     <img src="http://placehold.it/400x150"> 
 
    </div> 
 
</div> 
 
    </div>

來源

2015-05-23 Coburn

我承認我很努力地看到這個用例。 –

我有一個兩列的容器。一個是固定寬度的浮子，另一個佔據空間的其餘部分。通過設置父容器寬度，我可以設置填充其餘列的寬度。當頁面較小時，這也會閃爍。我想要一個最小寬度，所以它不會太小。默認寬度，因此它不會在大屏幕上變得太大，但不是最大寬度，因此如果需要在大屏幕上變大，它可以。 – Coburn

這是一種非常奇怪的方式，嘗試使其響應。這就是媒體查詢的目的。 –

也許嘗試刪除width:500px所以股利可以與內容增長，並添加max-width將其限制爲您的需求和設置您的最小寬度到500px以將其作爲默認寬度與媒體查詢以獲得更小的屏幕。如果您添加一些代碼，我可以幫助您更多。

來源

2015-05-23 20:55:09

我添加小提琴，給我一秒 – Coburn

Css使用最小寬度的默認寬度，但增長到適合內容

回答

相關問題