하나의 div 태그에서 다른 div 태그로 데이터를 이동시키고 두 태그 사이의 높이를 조절하려면 어떻게해야합니까?

Question

플로팅 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> 

Answer 1

CSS 3을 사용하는 것이 좋을지 만 나는이 순간이 실용적이지 않으며 표준이 아직 사용되지 않고 있다는 것을 알고 있습니다. 그래서, 내 문제를 해결하기 위해 내 코드에서 내용의 크기를 측정 한 다음 열을 분리해야 하는지를 나타내는 플래그를 테이블에 추가했습니다. 이 태그는 Div 태그 또는 테이블 셀과 함께 사용할 수 있습니다. Div 태그를 사용한 후에는 표시 속성이보다 일관적이고 전자 메일 메시지의 렌더링 방법이 일관 적이기 때문에 표 셀로 전환했습니다.당신의 aspx 페이지 장소에서 콘텐츠를 렌더링해야 할 첫 번째 셀 또는 DIV 태그의 내부에 중계기 또는 목록 컨트롤 : 당신이 네 가지, 당신의 함량을 측정 할 수있는 기능이 필요 뒤에 코드에서

<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> 

열 수있는 속성이

측정 기능을 보여주기 위해 콘텐츠 당신의 열 의 크기와 속성을 물건에 테이블 :

,691,363을210

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 

Answer 2

나는 이것이 CSS의 정의 된 책임 범위를 벗어난 것이라고 생각합니다. 동적으로 생성해야 할 수도 있습니다. 열 요소에 대해 <div>을 새로 작성하십시오. 열 내에서 개별적으로 <div>을 스택하십시오. 그런 다음 열을 왼쪽에서 오른쪽으로 띄웁니다.

Answer 3

은 아마 당신은 최대 한도로 높이를 지정하고 더 크로스 브라우저 호환성을 위해 순수 CSS로

Answer 4

을 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> 

LOREM의 Ipsum 제품의 슬픔 } 는 AMET consectetur의 adipiscing의 ELIT 앉아. Maecenas iaculis nisl nec nunc. Nam id lacus et lectus molestie tristique. 차량 운행에 따른 결과. Prous metus augue, cursus vitae, feugiat quis, porttitor ac, elit. Nulla et dui in mi laoreet auctor. 부적당 한 사건들. Maecenas는 magna eu neque를 판매합니다. Nulla sagittis. 도네기크 관절의 크기가 작습니다. 오르가슴 오르니 오시오. 이 마우리스는 눈에 띄지 않고 앉아 있고, 새끼를 낳거나, 새끼를 낳는다. Aenean et purus. 질량에있는 Curabitur. Morbi egestas nibh sed libero. Cras volutpat. 이학년은 이학년의 결과를 낳았습니다. Nunc bibendum ultricies orci. 이드 로렌. Pellentesque 또는 nisi. 불규칙성, 알리미, 비 침습성, ultrates id, odio.

아마도 웹킷이나 모질라 브라우저에서만 행운과 함께, 이것은 화면에 렌더링해야합니다. IE를 사용하는 사용자라면 누구나 브라우저가 호환되지 않는 이유를 알게 될 것입니다. 슬프게도.

CSS3 제안이 있지만 여기에 희망 사항은 http://www.w3.org/TR/css3-multicol/입니다.

편집 : 위의 예가 더 많거나 적은 그 전체가 들어있는 http://www.quirksmode.org의 Peter-Paul Koch에게 소품. 원본 기사는 여기에 있습니다 : http://www.quirksmode.org/css/multicolumn.html.