2011-12-24 40 views
0

我在頁面中使用了兩個div標籤(即一個在左邊,另一個在右邊像書)。 現在我在左側加載html頁面,如果超過,則轉到div標籤的右側。 給了我一個實現這個想法。如何打破不同部分的html頁面?

像你想在文本從第一塔的底部到第二列開始連續兩列呈現謝謝你看

+2

你可以告訴我們你已經擁有的HTML/CSS/JavaScript或http://jsfiddle.net/上的例子,並清楚你的問題是什麼...... – ManseUK 2011-12-24 09:16:04

+2

想法:計算左側的高度,計算內容高度,迭代內容元素並採取儘可能多的內容,例如content.height <= leftSide.height'並將它們添加到左側。將其餘部分添加到右側。 – 2011-12-24 09:16:59

回答

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> 

我不是微軟的粉絲。所以對於IE沒有承諾。

+0

不要只使用webkit和moz前綴,Opera也支持這個([沒有前綴](http://www.opera.com/docs/specs/presto29/css/multicolumnlayout/))。 – Bergi 2011-12-24 12:26:33

相關問題