Html CSS收缩元素而不导致跳转到下一行

我想缩小红色元素，在正确的位置有固定宽度的蓝色元素

看看这个例子：

1.
2.
.包装纸{
最大宽度：300px；
高度：100px；
保证金：0自动；
}
瑞德先生{
身高：100%；
宽度：80%；
背景色：红色；
浮动：左；
}
蓝先生{
身高：100%；
宽度：60px；
背景颜色：蓝色；
浮动：对；
}

并调整窗口大小

我能做什么？谢谢。

试试这个：

.wrapper {
    max-width:300px;
    height:100px;
    margin:0 auto;
    position:relative;
}
.red, .blue {
    position:absolute;
    top: 0; bottom: 0;
}
.red {
    background-color:red;
    left:0; right:60px;
}
.blue {
    background-color:blue;
    width:60px; right:0;
}

---

如果您的内容大小不可预测，那么通过CSS将元素转换为表格元素将是您的最佳选择

.wrapper {
    max-width:300px;
    height:100px;
    margin:0 auto;
    position:relative;
}
.red, .blue {
    position:absolute;
    top: 0; bottom: 0;
}
.red {
    background-color:red;
    left:0; right:60px;
}
.blue {
    background-color:blue;
    width:60px; right:0;
}

.wrapper{
    display: table;
    max-width: 300px;
    height: 100px;
    margin: 0 auto;
}

.red{
    height: 100%;
    width: 80%; 
    background-color: red;
    display: table-cell;
}

.blue{
    height: 100%;
    width: 60px;
    background-color: blue;
    display: table-cell;
}