14

赤いdivが右に拡大されないのはなぜですか? 画面の端で止まります。拡大するにはどうすればいいですか？

うまくいくことの1つは、赤いdivを「表示：テーブルセル」にすることですが、別の方法があるかどうか、そしてなぜこれが起こるのか疑問に思っていました...?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>
</body>
</html>
4

9 に答える 9

3

それは確かに奇妙です。外側を浮かせてみてください:

<div style="background-color: #f00; float:left;">
    <div style="width: 2000px; height: 100px;" />
</div>
于 2009-01-30T01:03:57.410 に答える
2

それが含まれている div は 2000px 未満です。次のようなことをする必要があります：

  <div style="background-color: #f00; width: 2000px;">
    <div style="width: 2000px; height: 100px; " />
  </div>

もちろん、内側の div の幅は、外側の div の幅と異なる場合を除き、指定する必要はありません。

于 2009-01-30T00:57:09.157 に答える
2

親のスタイルoverflow: auto;に入れます。<div>

于 2011-03-16T02:43:15.260 に答える
1 
  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>

そのような DIV タグ (つまり、自己終了タグ) を閉じると、問題が発生します。

合法かもしれませんが（このSOスレッドを参照）、私の経験では、奇妙な動作を引き起こすことがよくあります。

しかし、それは問題ではありません。次のコードは、Chrome と IE9 で機能します。

  <div style="background-color: #f00; display: inline-block; height: 100px;">
    <div style="width: 3000px; background-color: blue; height: 50px;">
        here is some content
      </div>
  </div>

Display: inline-block;必要なだけ大きくする (または小さくする) ように要素に指示します。

フィドル: http://jsfiddle.net/sArvr/

これは直感に反する動作のように思えます。

于 2011-12-17T05:39:51.293 に答える
1

こいつで確認。テキストが進むにつれてコンテナが展開されます...

    <div style="background-color: #f00; height: 100px; display: inline-block;">
      <div style="background-color: blue; height: 50px; white-space:nowrap; display: inline-block;">
        here is some content
      </div>
    </div>
于 2011-12-17T05:13:52.667 に答える
0

これを何に使用しているかにもよりますが、div 要素がページの主な焦点になると思います。この場合、そのwidth: 2000px;行を取得して、ストレッチするブロックレベルの要素に直接適用するのではなく、本体に適用することができます。

<style>
body
 {
width: 2000px;
 }
</style>

なんらかの理由でこの方法がうまくいかない場合は、透明なピクセル イメージを作成し、必要な幅を指定することもできます。

于 2009-01-30T00:57:05.927 に答える
0

内側の div の幅は変更できます。外側の div を拡大する必要があるため、幅を割り当てることができません。

于 2009-01-30T00:59:20.087 に答える
0

子 div の幅がブラウザの画面幅を超えても、親 div の最大幅はブラウザの画面幅によって制限されているようです。これは意外な発見…

親divでfloatを使用することをお勧めします。(参照: crescentfresh ) table-cell が IE6 では機能しないことは確かです。また、私のマシンでの IE7 の簡単なテストも機能しませんが、機能するはずです...

これはうまくいくはずです。（編集：これは機能しません...）

<div style="background-color: #f00; width: auto;">
  <div style="width: 2000px; height: 100px; "></div>
</div>
于 2009-01-30T01:05:19.403 に答える
0

置く <div style="min-height: 100px; " />

コンテンツをさらに大きくすると、div のサイズが自動的に大きくなります。

于 2012-01-12T11:48:24.780 に答える