Question

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

我想要做的是在dataContentSection div上指定一个高度，然后在左边列出其中的数据，然后在列表用完左边的空间后自动向右移动。 E.g。

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不能用于你可以使用列数js pulgin

Answer 2

<强> CSS

div.dataContentSection div {
 height: 100px;
 width: 100px;
 float: right;
}

我希望这会有所帮助

Answer 3

<style>
.dataFieldText{display:inline;}
.dataFieldValue{display:inline;}
</style>

使用div可以在两列中显示数据

3 个答案: