2009-05-02 3 views
1

私は複数の浮動小数点タグを持っており、それらを左から右に積み重ねて、新聞のテキストのように見せたいと思っています。難しいのは、divをフロートさせると、左から右に移動し、私がこれをしなければ、単純に互いの上に積み重なるということです。左から右に均等にスタックさせる方法はありますか?1つのdivタグから別のdivタグにデータを流し、両者の高さのバランスを取るにはどうすればよいですか?

<div> 
     <br /> 
     <br /> 
     <style type="text/css"> 
      .mainpanel 
      { 
       display: block; 
       border-left-width: 1px; 
       border-left-color: Black; 
       border-left-style: double; 
       padding: 3px; 
       float: left; 
      } 
     </style> 
     <div style="" class="mainpanel"> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       1 
      </div> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       2 
      </div> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       3 
      </div> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       4 
      </div> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       5 
      </div> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       6 
      </div> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       7 
      </div> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       8 
      </div> 
      <div style="width: 245px; float: left; padding: 5px;"> 
       9 
      </div> 
     </div> 
    </div> 
+0

に結合するテーブルを作成するには、「左から右スタック」とはどういう意味ですか?列について話していますか? – Shog9

答えて

1

CSS 3を使用しているのはうれしいことですが、現時点ではこれは実用的ではなく、標準がまだ使用されていないことを認識しています。したがって、私の問題を解決するために、コードの背後にあるコンテンツのサイズを測定し、列に壊れているかどうかを示すフラグをテーブルに追加しました。これは、Divタグまたはテーブルセルのいずれかで使用できます。 Divタグを使用した後、私は表のプロパティに一貫性があり、電子メールメッセージでの表示方法も変わったため、表のセルに切り替えました。あなたのaspxページの代わりに コンテンツがでレンダリングされるべき最初のセルまたはのdivタグの内側リピータまたはリストコントロール:あなたが4つのもの、 あなたの含有量を測定する機能を必要とするの後ろにあなたのコードでは

<table cellpadding="2" cellspacing="0"> 
<tr valign="top" > 
<td runat="server" id="TopTD"> 
     <asp:ListView ID="List" runat="server"> 
      <LayoutTemplate> 
       <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder> 
      </LayoutTemplate> 
      <ItemTemplate> 
      <asp:literal runat="server" id="divdivide" 
      visible='<%# eval("BreakFields") %>' Text='<%# eval("DivTag")%>'></asp:literal> 
<%# eval("Content")%> 
      </ItemTemplate> 
      <ItemSeparatorTemplate> 
     </asp:ListView> 
    </td> 
</tr> 
    </table> 
</div> 

あなたの列のサイズ

測定機能を表示する列数を持つプロパティで プロパティをあなたのコンテンツを詰め込むにテーブル:

Function stringSize(ByVal strTarget As String, ByVal strFont As String, ByVal sngFontSize As Single) As SizeF 
     strFont = "Arial, Sans-Serif" 
     Dim bitImg As New Bitmap(1, 1) 
     Dim g As Graphics = Graphics.FromImage(bitImg) 
     Dim f As New Font(strFont, sngFontSize) 
     Dim size As SizeF 
     g.PageUnit = GraphicsUnit.Pixel 
     size = g.MeasureString(strTarget, f) 

     Dim I As Int32 

     If Not String.IsNullOrEmpty(strTarget) Then 
      Dim Re As New Regex(vbCrLf) 
      I = Re.Matches(strTarget).Count 
     End If 
     If ColumnWidth > 0 Then 
      size.Height = (size.Height * (Math.Ceiling(size.Width/ColumnWidth))) + (I * 20) 
      size.Width = ColumnWidth 
      Else 
      size.Height = (size.Height * (Math.Ceiling(size.Width/DefaultSize))) + (I * 20) 
      size.Width = DefaultSize 
     End If 
     g.Dispose() 
     bitImg.Dispose() 
     f.Dispose() 

     Return size 
    End Function 
Public ColumnWidth() As Int32 

データを表示するときは、テーブルに入れて測定する必要があります。

Dim DT As New DataTable 
DT.Columns.Add("Content", GetType(Int32)) 
DT.Columns.Add("Height", GetType(Int32)) 
DT.Columns.Add("BreakFields", GetType(Boolean)) 
Dim Row As DataRow 
For Each itemtodisplay 
Row = DT.NewRow 
     Row("Content") = itemtodidisplay 
     Row("Height") = 0 
     Row("Height") += Fix(stringSize(itemtodisplay, "Arial", 10).Height) 
     Row("Height") += 10 
     HeightCounter += Row("Height") 
     DT.Rows.Add(Row) 
Next 
BindItems(DT, Top, StartDate) 

使用、これは実際には、リストコントロール

Private Sub BindItems(ByVal DT As DataTable) 
     If ColumnCount <= 0 Then 
      ColumnCount = 1 
     End If 

     Dim I As Int32 
     Dim HeightBreak As Int32 = (HeightCounter/ColumnCount) + 40 
     Dim CurrentCol As Int32 = 1 
     Dim Curheight As Int32 
     I = 0 
     Dim width As Int32 
     If ColumnWidth > 0 Then 
      width = ColumnWidth 
     else 
      width = DefaultSize 
     End If 
     If ColumnWidth > 0 Then 
     TopTD.Width = width + 6 
     DT.Columns.Add("DivTag", GetType(String)) 
     DT.Columns.Add("DivStyle", GetType(String)) 
     For Each Row In DT.Rows 
      Row("DivStyle") = "width:" & width & "px; text-align:left;padding-bottom:3px;" 
      If (Row("Height") + Curheight) > HeightBreak + 50 _ 
      And I > 0 _ 
      And ColumnCount > 1 _ 
       And CurrentCol < ColumnCount Then 
       Row("BreakFields") = True 
       Row("DivTag") = "</td><td width=" & width + 6 & ">" 
       CurrentCol += 1 
       Curheight = 0 
      Else 
       Row("BreakFields") = False 
      End If 
      I += 1 
      Curheight += Row("Height") 
     Next 

     StoryList.DataSource = DT 
     StoryList.DataBind() 
    End Sub 
+0

なぜこのような意見に同意しないのか説明するために、このケアを下落させた人がいますか?それは私のために確かに目覚めた。 – Middletone

0

これはCSSの定義された責任の範囲外だと思います。あなたはそれを動的に生成しなければならないかもしれません。列要素に新しい<div>を作成します。列内にスタック<div>を個別に入れます。列を左から右に浮かべます。

1

たぶん、あなたは、このような上限として高さを指定し、何のクロスブラウザの互換性のために、純粋なCSSで

1

をsurprizes持つべきではありませんか?私は思っていません、私は間違っていることを証明したいと思う、それは可能です。

あなたは違いをレンダリングする気にしないならば、あなたは-mozや-webkitオプションを使用できます。

div#multicolumn1 { 
     -moz-column-count: 3; 
     -moz-column-gap: 10px; 
     -webkit-column-count: 3; 
     -webkit-column-gap: 10px; 
     column-count: 3; 
     column-gap: 10px; 
} 

のdiv#のmulticolumn1 { -moz-列数:3; -moz-column-gap:10px; -webkit-column-count:3; -webkit-column-gap:10px; 列数:3; column-gap:10px; }

<div id=multicolumn1> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas iaculis nisl nec nunc. Nam id lacus et lectus molestie tristique. Nunc vel risus consequat nisi vehicula cursus. Proin metus augue, cursus vitae, feugiat quis, porttitor ac, elit. Nulla et dui in mi laoreet auctor. Ut imperdiet nisl ut sem. Maecenas sodales magna eu neque. Nulla sagittis. Donec nec eros quis ligula condimentum scelerisque. Ut venenatis orci non odio. Duis mauris velit, sagittis sit amet, fringilla vel, ornare id, ipsum. Aenean et purus. Curabitur in massa. Morbi egestas nibh sed libero. Cras volutpat. Cras vitae nulla id urna consequat bibendum. Nunc bibendum ultricies orci. Cras id lorem. Pellentesque vel nisi. Nulla ligula eros, aliquet sed, vestibulum non, ultrices id, odio. </p> 
</div> 

ダミーテキストの悲しみは、AMET consecteturのadipiscingのELIT座ります。 Maecenas iaculis nisl nec nunc。ナム・アイ・ラクス・レクサス・モレスティ・トリスティーク。車両はカーサスになります。プロメトゥスaugue、cursus vitae、feugiat quis、porttitor ac、elit。 Nulla et dui in mi laoreet auctor。 Ut imperdiet nisl ut sem。 Maecenas sodales magna eu neque。 Nulla sagittis。 Donec nec erosは結膜切開を必要とする。ウンベネナティスorci非オディオ。デュース・マウリス・ヴェリット、サッティッティ・アット・アット・アット・フリンティラ・ベル、ornare id、ipsum。 Aenean et purus。マッサのクレイビュール。 Morbi egestas nibh sed libero。 Cras volutpat。 Cras vitae nulla id urnaの結果はbibendumです。 Nunc bibendum ultricies orci。 Cras id lorem。 Pellentesque vel nisi。 Nulla ligula eros、aliquet sed、vestibulum non、ultrices id、odio。

おそらくWebkitやMozillaブラウザのみで、これは画面上に表示されるはずです。 IEを使用している人にとっては、おそらく、クロスブラウザーとの互換性がないのは悲しいことでしょう。

CSS3の提案がありますので、ここに期待しています:http://www.w3.org/TR/css3-multicol/

編集:ピーター・ポール・コッホへの小道、http://www.quirksmode.org上記の例が多かれ少なかれ完全に持ち上げられています。ソース記事は、http://www.quirksmode.org/css/multicolumn.htmlです。

+0

...「Lorem ipsum ...」という段落は、プレビューボックスの列として表示されます。しかし、実際のページではありません。うーん。ああ、まあ...とにかくWebkit(Midori)とFirefox(3.x)でもうまくいきます。しかし、Opera(9.63、少なくとも)ではなく... –

関連する問題