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

时间:2012-07-06 00:30:11

标签: css word-wrap fluid-layout

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

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

我该怎么做才能防止这种情况发生?我可以阻止这个吗?

到目前为止我尝试过:

  • 使用CSS white-space: nowrap;属性,但似乎这样 不是最好的解决方案。
  • 只是将空间留在红色框下方,但这确实会对设计造成太大影响。

我想要实现的目标:灰色框应该增长,因此红色框永远不会在灰色框上扩展。红框内的文字不应该被剪掉。

2 个答案:

答案 0 :(得分:0)

  • 您可以为红色框设置width: 180px
  • 较小屏幕的视口。
  • 如果你不能绝对放置你的盒子,下面的盒子也会漂浮下来

答案 1 :(得分:0)

你想做什么呢?

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

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

DEMO

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

Updated demo