停止浮動與「固定」大小的div從浮出來容器

Question

的我有一定max-width一個<div>容器，

max-width: 300px; 
margin: 4em auto; 
border: 1px solid black; 

包含兩兩件事：1）文本，2）浮置與DIV

float: right; 
width: 150px; 

查看我的示例http://jsfiddle.net/uXEBR/。

當您縮小窗口寬度時，浮動<div>與預期的一樣，超出了包含<div>的範圍，超出了其左邊界。但是，我希望它的寬度減小，以便它永遠不會離開外部<div>的邊界。換句話說，浮動元素的寬度規格應該以外部div的足夠寬度爲條件。有沒有辦法在CSS中實現這一點？

Answer 1

另一種選擇是media查詢。以下是基於您提供的代碼的示例。請注意，.divright元素只會收縮爲div中最長的單詞。

>>jsFiddle<<

CSS：

.divout { 
    max-width: 300px; 
    margin: 4em auto; 
    border: 1px solid black; 
} 
.divright { 
    float: right; 
    max-width: 150px; 
    margin-right: 1.25em; 
    border: 1px solid black; 
} 
@media screen and (max-width: 225px) { 
    .divright { 
     margin-left: 1.25em; 
    } 
} 

Answer 2

肯定的：

width: 50%; 
max-width: 150px;