2013-02-21 81 views
2

對不起,如果我的英語有錯誤))。我的問題是如何使高度限制div?我的意思是,我的div有一些ul塊,例如:如何讓高度限制div?

<div> 
<ul> 
    <li>First text</li> 
</ul> 
</div> 

而我的DIV有高度280像素。當我嘗試添加越來越多<li>smth...</li> - 它越來越低,並且畢竟我的文字低於我的div的高度限制。

不要提出float:left,這意味着,我的所有文本都會在水平線上添加,但是我想實現垂直高度限制。你知道,像報紙一樣。

邏輯:我的文字必須在我的身高限制之前越​​來越低,在此之後,我的文字必須自行拆分,然後繼續在新的垂直線上向下移動到同一個div元素中。

圖片對於那些誰不明白我在說什麼:

Image

+3

你看過http://stackoverflow.com/questions/4923/wrapping-lists-into-columns? – Raad 2013-02-21 12:30:42

+0

@你是對的目標 – entonio 2013-02-21 12:43:02

+0

@entonio - 謝謝。我不害羞 - 我會隨時採取upvote;) – Raad 2013-02-21 12:54:12

回答

1

我不知道是否有可能這個腳本中包含的寬度,但它將使從柱流柱。我也注意到,這似乎並沒有在IE瀏覽器中工作。

<head> 
<style> 
.columnFlow 
{ 
-moz-column-count:3; /* Firefox */ 
-webkit-column-count:3; /* Safari and Chrome */ 
column-count:3; 

-moz-column-gap:40px; /* Firefox */ 
-webkit-column-gap:40px; /* Safari and Chrome */ 
column-gap:40px; 

-moz-column-rule:2px outset #ff00ff; /* Firefox */ 
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */ 
column-rule:4px outset #ff00ff; 
} 
</style> 
</head> 
<body> 

<div class="columnFlow"> 
This text will flow within 3 different columns. The only think that I am unsure about is how to get this to work within IE. Also I am not sure how to specifically set the width. It appears as though it even spreads the provided text evenly within the amount of columns that the developer chooses. I hope this helps. 
</div> 

</body> 

在W3C網站上有一些額外的版本。我希望這有幫助! http://www.w3schools.com/css3/css3_multiple_columns.asp