如何防止右div在左边div下包装？

Question

see fiddle here

当我逐渐从右到左调整窗口大小时：

• 红色右框缩小宽度越来越小......好的
• 第二个绿色项目位于第一个绿色项目下...确定
• 红色右侧框和2个内部绿色项目位于蓝色左侧框下方...不正常

我希望红色的右框保持不变，其余的行为保持不变。

尝试了很多事情，例如block: inline-block，min-width，white-space: nowrap，没有效果。

请帮忙！

（并且有人可以解释为什么当右侧还有那么多空间时，红色盒子会被包裹？）

感谢!!!

Answer 1

父母的{p> display: table和孩子的display: table-cell;就是你的目标。

Have a fiddle!

1. 移除.left和.right上的花车（将浮球放在绿色方框上）
2. 将display: table添加到.wrapper
3. 将display: table-cell;添加到您的.left和.right
4. 将vertical-align:top;添加到“表格单元格”，以便内容不会垂直居中

CSS

html {
    width:100%;
    height:100%;
}
body {
    padding: 0px;
    margin: 0px;
    width:100%;
    height:100%;
}
.wrapper {
    width: 100%;
    height:100%;
    display: table;
}
.left {
    width: 25%;
    min-width:100px;
    height: 100%;
    margin:0px;
    border: 1px solid blue;
    display: table-cell;
    vertical-align:top;
}
.right {
    display: table-cell;
    vertical-align:top;
    width: 70%;
    height: 100%;
    border: 1px solid red;
}
.item {
    width:100px;
    height:100px;
    margin:20px;
    float: left;
    border:1px solid green;
}