css - 如何防止右div包裹到左div下面？

Question

see fiddle here

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

• 红色右框的宽度越来越小......好吧
• 第二个绿色元素位于第一个绿色元素下方...好的
• 红色右框和 2 个内部绿色元素位于蓝色左框下方...不行

我希望红色右侧框保留在那里，其余行为保持不变。

尝试了很多东西，比如block: inline-block、min-width、white-space: nowrap，但没有任何效果。

请帮忙!

(谁能解释一下为什么红色盒子在右侧仍然有这么多空间的情况下会包裹起来？)

谢谢!!!

Answer 1

display: table 对于父级和 display: table-cell; 对于子级就是您所追求的。

Have a fiddle!

1. 移除 .left 和 .right 上的 float (将 float 保留在绿色方框上)
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;
}