css - CSS 流体布局 - 文本扩展区域

Question

我有以下 HTML 和 CSS：http: //jsfiddle.net/j8aFS/1/

当您减小窗口大小时，由于自动换行，红色框和文本会在灰色区域上展开。

我能做些什么来防止这种情况发生？我可以防止这种情况吗？

到目前为止我已经尝试过：

• 使用 CSSwhite-space: nowrap;属性，但这似乎不是最好的解决方案。
• 只是在红色框下方留出空间，但这确实对设计影响太大。

我想要实现的目标：灰色框应该增长，所以红色框永远不会在灰色框上扩展。红框内的文字不应该被剪掉。

Answer 1

• 你可以width: 180px为你的红框设置一个
• 小屏幕的视口。
• 如果你不把你的盒子放在绝对位置，下面的盒子也会飘下来

Answer 2

你想要发生什么？

如果您制作灰色框position relative并将其溢出设置为隐藏，则红色框将被切断。

.div1 {
    height: 62%;
    background-color: grey;
    overflow: hidden;
    position: relative;
}

演示

除非您为红色框指定设置宽度，否则使窗口变小会导致它变高并溢出。您可以隐藏它（我的解决方案），让它溢出（当前行为）或不做绝对位置，让它使灰色框变大。在您的问题中，您根本不清楚您想要它做什么。

更新的演示