asp.net - 使用div分两列显示数据

Question

我正在尝试使用 CSS 格式化下面显示的 HTML 数据。我希望数据显示在每个 dataContentSection div 中的两列中。到目前为止，我看到的解决方案要求您在 dataContentSection 中指定另一个 div，一个用于左侧，一个用于右侧。

我想要做的是在 dataContentSection div 上指定一个高度，然后将其中的数据列在左侧，然后在列表用完左侧空间后自动移动到右侧。例如

Part A
Col1: foo          Col4: 05/11/1955
Col2: bar          Col5: Choo
Col3: 32

Part B
Col6: foo          Col9: 05/11/1955
Col7: bar          Col10: Choo
Col8: 32

我在此示例中使用了 Col1、Col2、Col3 等，但它们实际上是数据集返回的数据字段。

<div class="dataContentSection">
<span class="titleText">Part A</span>
<br />
    <div id="Col1">
        <span class="dataFieldText">Col1</span>
        <span class="dataFieldValue"><%# GetValue("Col1")%></span>
    </div>
    <div id="Col2">
        <span class="dataFieldText">Col2</span>
        <span class="dataFieldValue"><%# GetValue("Col2")%></span>
    </div>
 <div id="Col3">
        <span class="dataFieldText">Col3</span>
        <span class="dataFieldValue"><%# GetValue("Col3")%></span>
    </div>
<div id="Col4">
        <span class="dataFieldText">Col4</span>
        <span class="dataFieldValue"><%# GetValue("Col4")%></span>
    </div>
<div id="Col5">
        <span class="dataFieldText">Col5</span>
        <span class="dataFieldValue"><%# GetValue("Col5")%></span>
    </div>
</div>

<div class="dataContentSection">
<span class="titleText">Part B</span>
<br />
    <div id="Col6">
        <span class="dataFieldText">Col6</span>
        <span class="dataFieldValue"><%# GetValue("Col6")%></span>
    </div>
    <div id="Col7">
        <span class="dataFieldText">Col7</span>
        <span class="dataFieldValue"><%# GetValue("Col7")%></span>
    </div>
<div id="Col8">
        <span class="dataFieldText">Col8</span>
        <span class="dataFieldValue"><%# GetValue("Col8")%></span>
    </div>
<div id="Col9">
        <span class="dataFieldText">Col9</span>
        <span class="dataFieldValue"><%# GetValue("Col9")%></span>
    </div>
<div id="Col10">
        <span class="dataFieldText">Col10</span>
        <span class="dataFieldValue"><%# GetValue("Col10")%></span>
    </div>
</div>

Answer 1

@spangeman；你可以为此使用 css3 column-count 属性你可以在这里查看我的例子

How to stack divs from top to bottom in CSS

例如http://jsfiddle.net/sandeep/pMbtk/

但是 IE 不工作，你可以使用 column-count js pulgin