从浮动容器中停止具有“固定”大小的浮动div

Question

我有一个<div>容器，其中包含某个max-width，

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;