使用div顯示兩列數據

我想使用CSS格式化數據顯示HTML。我希望數據顯示在每個dataContentSection div的兩列中。我目前看到的解決方案要求您在dataContentSection中指定另一個div，一個用於左側，另一個則是右側。使用div顯示兩列數據

我想要做的是在dataContentSection divs上指定一個高度，然後將其中的數據列在左邊，然後在左邊的房間用完後自動移動到右邊。例如。

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>

來源

2011-09-21 Hoody

所以基本上，你想要的是float：top？ –

你應該把你的例子放在jsfiddle.net上，這樣人們可以分享他們的修復。 –

@spangeman;您可以使用CSS3 column-count屬性這一點，你可以點擊這裏

How to stack divs from top to bottom in CSS

我的例子，例如http://jsfiddle.net/sandeep/pMbtk/

但它不是爲工作，IE瀏覽器，你可以使用列數JS pulgin

來源

2011-09-21 09:00:04 sandeep

CSS

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

我希望這有助於

來源

2011-09-21 08:43:13

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

來源

2011-09-21 08:44:31 mooglife

使用div顯示兩列數據

回答

相關問題