0

私は次のHTMLとCSSを持っています：http：//jsfiddle.net/j8aFS/1/

ウィンドウサイズを小さくすると、ワードラップが原因で、赤いボックスとテキストが灰色の領域に拡大します。

これを防ぐために何ができますか？これを防ぐことはできますか？

私がこれまでに試したこと：

  • CSSwhite-space: nowrap;プロパティを使用しますが、これは最善の解決策ではないようです。
  • 赤いボックスの下にスペースを残すだけですが、これはデザインに大きな影響を与えます。

私が達成したいこと：灰色のボックスが大きくなり、赤いボックスが灰色のボックスの上に拡大しないようにする必要があります。赤いボックス内のテキストは切り取られないようにする必要があります。

4

2 に答える 2

0
  • width: 180pxあなたはあなたの赤い箱のためにを設定することができます
  • 小さい画面のビューポート。
  • ボックスを絶対に配置しない場合は、下のボックスも浮き上がります
于 2012-07-06T00:37:05.750 に答える
0

代わりに何をしたいですか？

灰色のボックスを作成し、position relativeオーバーフローを非表示に設定すると、赤いボックスが切り取られます。

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

デモ

赤いボックスに設定された幅を指定しない限り、ウィンドウを小さくすると、ウィンドウが高くなり、オーバーフローします。それを非表示にする（私の解決策）、オーバーフローさせる（現在の動作）、または絶対位置を行わないで灰色のボックスを大きくすることができます。あなたの質問では、あなたがそれを何をしたいのか全く明確ではありません。

更新されたデモ

于 2012-07-06T00:37:12.880 に答える