2

私は、ビデオとコメントを並べて表示するYoutube ユーザー スタイル スクリプトに取り組んでいるので、ビデオを見ながら同時にコメントを読むことができます (なんて素晴らしいアイデアでしょう - 当然)。スクリーンショットで、私がどこまで到達したかを確認できます。つまり、私は Firefox だけに関心があり、CSS3 は問題ありません。

私が抱えている問題は、完全に流動的なレイアウトを作成し、「他のビデオ」div を右にフロートさせ、中央の div (コメント) を伸ばして左の div (再生されたビデオ) 間の残りのスペースを埋めたいことです。右の div (「その他の動画」)。

CSS に変換すると、問題は次のとおりです。div が「main」、「rightnav」、および「footer」の場合、ドキュメント内でこの固定された順序で、rightnav div を右にフロートさせ、フッターをその下に配置するにはどうすればよいですか? 私がなんとかした最善の方法は、「rightnav」（右：0）を絶対に配置することでしたが、フッターは両方の下ではなく、「メイン」divの下に移動しました。CSS を使用して DIV の並べ替えを既に確認しました。「メイン」div の内容に依存するため、負の「トップ」値は除外されます。

ソースコードは次のとおりです。

<html lang="en-US">
<head>
<style type="text/css">

#main {
   border: 1px solid;
   float: left;
   margin-right: 410px;
}

#rightnav {
   background-color: yellow;
   opacity: 0.5;
   border: 1px dotted;
   width: 400px;
   float: right;
   position: absolute;
   right: 0;
}

#footer {
   clear: both;
}   

</style>
</head>
<body>

<div id="baseDiv" style="width: 100%">
  <div id="main">
  <script>for (var i=1; i<100; i++) document.write('main ');</script>
  </div>

  <div id="rightnav">
  <script>for (var i=1; i<200; i++) document.write('rightnav ');</script>
  </div>

  <div id="footer">
  <script>for (var i=1; i<100; i++) document.write('footer ');</script>
  </div>

</div>

</body>
</html>

2 つの div の下の「フッター」と「メイン」の div 流体です。

アイデアをありがとう。

4

3 に答える 3

2 
#main {
   border: 1px solid;
   width: 50%;
   float: left;
}

#rightnav {
   background-color: yellow;
   opacity: 0.5;
   border: 1px dotted;
   width: 48%;
   float: right;
}

#footer {
   clear: both;
}

それでいい

編集：通常、パーセントベースの寸法を意味する液体と言う場合は、頭の中でそのようなものを関連付け始めます

于 2008-11-18T11:51:48.653 に答える
1

これはあなたの問題を解決するかもしれませんし、しないかもしれません.3列はフロートを使用し、3つのパネルの中で最も高いものに対応するためにdivサイズを垂直に含みます.フロートは真ん中のパネルの前に最初のインラインで表示されなければなりません.IEはこれでうまくいきます.このレイアウトは自然だと思いますインラインで、IE ハックをスタイルで見ることができます。

これは多くのものでうまく機能し、他の中央マージン要素が表示される場合があり (#mid_con)、スタックします。唯一の問題は、左右のパネルの高さが最初の中央パネルよりも短い場合、2 番目の中央パネルが #tub_con 全体の幅を占めることです。 cuz は、最初の中間 div のすぐ下に 100% 積み重なって表示されます。これは、(#mid_con) に静的な幅を指定することで修正できます。これにより、IE がフロート後に残りのスペースの中央に配置するか、全幅に中央揃えにするかに関係なく、常に中央に配置され、同じサイズのままになります。静的な幅のIEハックが必要ない場合は、それで遊んで楽しんでください。float は、IE の通常のフローから div を完全に削除しないようです。先行する要素をプッシュして表示し、2 つの float の左右に一致させるだけのようです。

    <!--BEGIN HEADER-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 <title>float3col demo</title>

 <style>
  #tub_con{
  display:block;
  position:relative;
  text-align:center;
  width:500px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  border: solid #000000;
  }

  #left_nav{
  display:block;
  position:relative;
  float:left;
  height:80px;
  width:30%;

  max-width:30%;
  border: solid #000000;
  }
  #right_nav{
  display:block;
  position:relative;
  float:right;
  height:80px;
  width:30%;
  border: solid #000000;
  }
  #mid_cont{
  display:block;
  position:relative;
  padding-top:5px;
  margin-left:auto;
  margin-right:auto;
  height:auto;
  width:35%;
  border: solid #f86fff;
  }
  *html #mid_cont{
  display:block;
  position:relative;
  padding-top:5px;
  margin-left:auto;
  margin-right:auto;
  height:auto;
  width:100%;
  border: solid #f86fff;
  }

 </style>
</head>

<body style="text-align:center;">
<div id="tub_con">
<div id="left_nav"></div>
<div id="right_nav">
</div>
<div id="mid_cont">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
</div>

<!--Test the stacking problem
      <div id="mid_cont">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x 
</div>-->

<div style="clear:both;"></div>
</div>

<p style="width:100px; border:solid #000000; margin-left:auto; margin-right:auto;">
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
</p>
</body>
于 2010-01-11T00:44:14.613 に答える
1

position: absolute; は必要ありません。右側の div でも右側にもありません: 0; ポジショニング。左にフロートされた別の div の隣に div をフロートすると (マージンを設定した状態で)、ブラウザー ウィンドウのいずれかの側に配置され、左側の div が拡張されて利用可能なスペースを埋める必要があります (によって作成された 10 ピクセルのギャップは別として)。あなたのマージン）。オブジェクトを「絶対に」配置すると、ドキュメントの通常の流れから効果的に削除され、スペースを占有しなくなります (他のオブジェクトを「押し込む」こともありません)。明確に保ちながら、右側のdivからポジショニングを単純に削除すると思われます。フッターであなたの問題を解決します。float: right; になるように、ソース コードで左右の div の順序を入れ替える必要がある場合もあります。項目はフロートの前に来ます: 左; アイテム。

PS YouTube で動画を見ながら同時にコメントを読むことができないことにいつも悩まされていました。

于 2008-11-18T11:35:26.360 に答える