css - 阻止大小为 "fixed"的 float div 浮出容器

Question

我有一个 <div>容器与一定max-width ,

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

包含两件事:1) 文本，2) 带有

的 float div

float: right;
width: 150px;

请参阅我的示例 http://jsfiddle.net/uXEBR/ .

当您减小窗口的宽度时， float <div> ，正如预期的那样，扩展到包含 <div> 之外, 超出其左边界。但是，我希望它的宽度减小，这样它就不会离开外部 <div>的边界。换句话说， float 元素的宽度规范应该以外部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;
    }
}