2

私の英語に間違いがあれば申し訳ありません))。私の質問は、高さ制限のある div を作成する方法ですか? つまり、私の div にはいくつかの ul ブロッ​​クがあります。たとえば:

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

私のDIVの高さは280ピクセルです。ますます追加しようとすると、どんどん<li>smth...</li>低くなり、その後、テキストが div の高さ制限を下回りました。

float:left を提案しないでください。つまり、すべてのテキストが水平線に追加されますが、垂直方向の高さ制限を達成したいと考えています。新聞のようなものですね。

ロジック: テキストは、高さ制限の前にどんどん低くなる必要があります。その後、テキストはそれ自体を分割し、新しい垂直線を同じ div 要素に移動し続ける必要があります。

私が話していることを理解していない人のための画像：

画像

4

1 に答える 1

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

于 2013-02-21T21:16:29.430 に答える