css - 「固定」サイズのフローティング div がコンテナの外に出ないようにする

Question

私は<div>特定のコンテナを持っていますmax-width、

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

2 つのものを含む: 1) テキスト、2) フローティング div

float: right;
width: 150px;

http://jsfiddle.net/uXEBR/で私の例を参照してください。

ウィンドウの幅を縮小すると、フローティング<div>は予想どおり、包含の外側に拡張され、<div>左側の境界線を超えます。ただ、外側の枠からはみ出さないように幅を狭くしたい<div>です。つまり、浮動要素の幅指定は、外側の div の十分な幅を条件とする必要があります。CSSでこれを達成する方法はありますか?

Answer 1

もう 1 つのオプションはmediaクエリです。これは、提供したコードに基づく例です。要素.divrightは、div.

>>jsフィドル<<

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;