css - 停止浮动 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

Sure:

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