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

Question

see fiddle here

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

• 红色右边的框越来越小了……ok
• 第二个绿色元素在第一个绿色元素下面......好的
• 红色右侧框和 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;
}