4

これが単純なものであることを願っていますが、すぐに解読できないようです...

2 列のレイアウトがあり、右側の列のコンテンツは動的で ajax 駆動です。したがって、ページの高さは、右の列にあるものによって異なります。

小さなフラッシュ ファイル (400px x 200px) をページの一番下、ただし列 1 の下にボルトで固定したいと考えています。

簡単だ。問題は..フラッシュの上マージンを -200px にしたいので、フラッシュ自体がはみ出さないようにします。これにより、無駄な空白も削減されます。

<div id="container">
  <div id="col_1" style="float:left; padding-bottom:200px;">Some static content</div>
  <div id="col_2" style="float:left">AJAX content</div>

  <div style="clear:left"></div>

  <div id="flash_container" style="margin-top:-200px;>
		<object>Flash file</object>
	</div>
</div>

コードをかなり単純化しましたが、私の言いたいことがわかるはずです。シンプルな 2 列、列をクリアし、フラッシュ div に負のマージンを設定します。IE6、Safari では正常に動作し、Opera、Firefox、および Chrome では惨めに失敗します。

クリアの「スルー」でマイナスマージンを適用できますか?

すべての助けに感謝します;）

4

3 に答える 3

4

どうぞ：

<div id="container" style="position: relative;">
  <div id="col_1" style="float:left; padding-bottom:200px; background-color: #235124;">Some static content<br />Another line</div>
  <div id="col_2" style="float:left">AJAX content</div>

  <div style="clear:left"></div>

  <div id="flash_container" style="margin-top: -200px; position: absolute;">
    <object>
      <param name="movie" value="boxheadrooms.swf">
      <embed src="boxheadrooms.swf" width="550" height="400">
      </embed>
    </object>
  </div>
</div>

すべてをラップするために余分な div が必要ですが、相対位置を有効にするために必要です。

私が追加した追加のタグ、フラッシュ オブジェクト、および背景色は無視してください。これらは、何が起こっているのかを理解しようとしているときに、問題をより明確にするためのものです。

于 2009-07-23T14:51:07.413 に答える
0

2 つの列を div でラップしoverflow:hidden、フロートをクリアするために使用します。と を使用clear:bothしposition:relativeて、フラッシュ div を左に移動し、2 つの列を重ねます。

背景色と高さを追加して、div が配置されている場所を確認できるようにしました。

   <div id="container">
        <div style="overflow:hidden;">
            <div id="col_1" style="float:left; padding-bottom:200px;background-color:#c00;">Some static content</div>
            <div id="col_2" style="float:left;height:300px;background-color:#0c0;">AJAX content</div>
        </div>

        <div id="flash_container" style="margin-top:-200px;position:relative;clear:both;background-color:#ccc;height:100px;">
            <object>Flash file</object>
        </div>
    </div>
于 2009-07-23T15:15:16.547 に答える
0

はい、できます。負のマージンは、フラッシュ コンテナーの div をそこに配置します。問題は、そのコンテンツがどのように動作するかです。

フラッシュオブジェクトを長いテキストに置き換えると、テキストが「そこから」始まりながら、フロートの周りを折り返すことがわかると思います。

padding-bottom を margin-bottom に置き換えるか、フラッシュ オブジェクト要素の表示プロパティを変更してみてください。

于 2009-07-23T15:08:33.953 に答える