2011-12-24 5 views
0

ページ内に2つのdivタグを使用しています(つまり、左側に1つ、右側に1つずつ)。 今、左側のHTMLページを読み込んでいますが、それを超えるとdivタグの右側に移動します。 これを実装するためのアイデアを教えてください。別のセクションでhtmlページを分割するにはどうすればいいですか?

は、テキストが第二の列の先頭に最初の列の下から続けて2列のプレゼンテーションをしたいようにこの音を

+2

あなたが既に持っているHTML/CSS/JavaScript、またはhttp://jsfiddle.net/の例とあなたの問題の明確なアイデアを表示できますか? – ManseUK

+2

アイデア:左の辺の高さを計算し、コンテンツの高さを計算し、コンテンツ要素を反復し、 'content.height <= leftSide.height'のように多く取り、それらを左側に追加します。残りの部分を右側に追加します。 –

答えて

1

を見ていただきありがとうございます。 Netscapeはそのような目的のために独自のタグを持っていましたが、あまり使用されず、Netscapeで死んでしまいました。この問題は、スタイリングと、CSS3 Multicolumn Layoutモジュールの一部とみなされます。その主な問題は、IEのどのバージョンでもサポートが不足していることです。入門記事については、QuirksMode.orgのColumnsをご覧ください。

3

はい、CSS3、cssクラスで指定された高さの複数列レイアウトを使用できます。

  <html> 
      <head>Test </head> 

      <style> 
      .tt{ 
       -moz-column-count: 2; 
       -moz-column-gap: 1em; 
       -moz-column-rule: 1px solid black; 
       -webkit-column-count: 2; 
       -webkit-column-gap: 1em; 
       -webkit-column-rule: 1px solid black; 
       height:200px; 
      } 

      </style> 
      <body> 
      <div class="tt"> 
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived. 
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived.  
       HTML5 and CSS3 have just arrived. HTML5 and CSS3 have just arrived.  
       HTML5 and CSS3 have just arrived.HTML5 and CSS3 have just arrived.  
      </div> 
      </body> 
      </html> 

私はMicrosoftのファンではありません。 IEのための約束はありません。

+0

webkitとmoz-prefixesだけを使用しないで、Operaはこれもサポートしています([接頭辞なし](http://www.opera.com/docs/specs/presto29/css/multicolumnlayout/))。 – Bergi

関連する問題