CSS流动布局 - 文本扩展了面积

我有以下的HTML CSS &：http://jsfiddle.net/j8aFS/1/CSS流动布局 - 文本扩展了面积

当你减小窗口大小，红色框和文本扩展，因为这个词的包裹在灰色地带。

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

我迄今为止尝试：

使用CSS white-space: nowrap;财产，但似乎这是不是最好的解决方案。
简单地将空间留在红色盒子下方，但这太影响设计了。

我想要达到的目标：灰色方块应该长大，红色方块永远不会在灰色方块上扩展。红色框内的文字不应该被切断。

来源

2012-07-06 Sven

你想而不是发生什么事？

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

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

DEMO

除非你指定的红色方块一组宽度，使该窗口小会使其获得更高和溢出。你可以隐藏它（我的解决方案），让它溢出（当前行为），或者不让绝对位置，让它变大灰色框。在你的问题中，根本不清楚你想要做什么。

Updated demo

来源

2012-07-06 00:37:12 sachleen

感谢您的答复！请注意，我已经编辑了我的问题以回答您的问题。如果我绝对移除位置，则由于边距，红色框位于灰色弓的下方。如果我调整边距，灰色框也会改变不需要的位置。 – Sven 2012-07-06 00:47:52

如果您在答案中给出'.div1'位置'relative'，并将'＃div2'的位置保留为'absolute'，那么您会得到某种期望的行为。如果不希望红色框的宽度或高度增加，而不考虑它包含的内容，则必须指定固定的宽度和高度，并将'overflow：hidden'指定为'＃box2'。 – sarcastyx 2012-07-06 01:26:26

@Sven仍然不确定你想要达到的目标..但我更新了另一个演示。看看是否让你走上正轨。 – sachleen 2012-07-06 01:30:45

你可以为你的红盒子
对于小屏幕的视口设置width: 180px。
如果would'nt放置你的盒子绝对的，下面的框将向下浮动以及

来源

2012-07-06 00:37:05 wolfv

CSS流动布局 - 文本扩展了面积

回答

相关问题