Как заставить данные перетекать из одного тега 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>

В вашем коде нужно четыре вещи, функция для измерения вашего контента таблица, в которую нужно наполнить ваш контент свойство с размером ваших столбцов свойство с количеством отображаемых столбцов

Функция измерения:

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

Может быть, вы должны указать высоту, например, максимальный предел, и не иметь сюрпризов

Answer 3

Для кросс-браузерной совместимости и с чистым CSS? Я не думаю, и я хотел бы быть доказанным неправильно, это возможно.

Если вы не возражаете против отрисовки различий, вы можете использовать опции -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-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px; количество столбцов: 3; пробел в колонке: 10 пикселей; }

<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 Dolor Sit Amet, Concetetur Adipiscing Elit. Меценат iaculis nisl nec nunc. Nam id lacus et lectus molestie tristique. Nunc vel Risus Conquat Nisi Vehicleula Cursus. Proin metus augue, cursus vitae, feugiat quis, porttitor ac, elit. Nulla et dui в моем лауреате. Ut imperdiet nisl ut sem. Меценат соды магна ес некэ. Нулла Сагиттис. 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. Курабитур в Массе. Morbi egestas nibh sed libero. Крас волутпат. Cras vitae nulla id urna. Последовательный Бибендум. 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.

Answer 4

Я думаю, что это вне определенных обязанностей CSS. Возможно, вам придется динамически генерировать его. Создайте новый <div> для элемента столбца. Стек <div> внутри колонн индивидуально. Затем перемещайте столбцы слева направо.