css列和內容

這可能是最常見的問題，但我真的不能找到任何似乎對我有用的東西 - 我是一個新手@造型/ CSS。css列和內容

我想一個跨瀏覽器兼容的溶液（IE9或更高順便說一句）其中，I可以具有作爲報頭（第一行）3列：

Name_____DOB______Contact

下方，將有內容。一行數據，我希望數據行（包含在div中）與列標題正確對齊。

目前我有這樣的：

<div style="width: 100%"> 
    <div style="width: 300px; float:left">Name</div> 
    <div style="width: 200px; float:left">DOB</div> 
    <div style="width: 100px; float:left">Contact</div> 
</div>

中的數據，我使用MVC4剃刀，所以我只是用一個for循環要經過數據的收集和一個div隨地吐痰出來的條款即：

[for loop here] 

    <div id="[email protected]"> 
     [data here] 
    </div> 
[end for loop]

來源

2013-09-10 Ahmed ilyas

如果你正在創建一個表，使用'

' – 2013-09-10 19:58:13

雖然使用'

'是創建佈局的不好的做法。它是創建表格的最佳實踐。所以不要試圖發明輪子，對於桌子**使用'

'**。 – avrahamcool

我試圖避免使用表，因爲它的舊/過時等等，並且希望使用CSS3和HTML5向前推進 –

回答

您可以繼續使用相同的方法。

<div> 
    <div style="width: 100%"> 
     <div style="width: 300px; float:left">Name</div> 
     <div style="width: 200px; float:left">DOB</div> 
     <div style="width: 100px; float:left">Contact</div> 
    </div> 
    <div style="width: 100%"> 
     <div style="width: 300px; float:left">Name 1</div> 
     <div style="width: 200px; float:left">DOB 1</div> 
     <div style="width: 100px; float:left">Contact 1</div> 
    </div> 
    <div style="width: 100%"> 
     <div style="width: 300px; float:left">Name 2</div> 
     <div style="width: 200px; float:left">DOB 2</div> 
     <div style="width: 100px; float:left">Contact 2</div> 
    </div> 
    .. 
</div>

我強烈建議您使用它。改用一張表。也（作爲BTY）：不要混合你的標記和CSS，使用類似的東西。

HTML：

<div> 
    <div> 
     <div class="column col1">Name</div> 
     <div class="column col2">DOB</div> 
     <div class="column col3">Contact</div> 
    </div> 
    <div> 
     <div class="column col1">Name 1</div> 
     <div class="column col2">DOB 1</div> 
     <div class="column col3">Contact 1</div> 
    </div> 
    <div> 
     <div class="column col1">Name 2</div> 
     <div class="column col2">DOB 2</div> 
     <div class="column col3">Contact 2</div> 
    </div> 
    .. 
</div>

CSS：

.column 
{ 
    float: left; 
} 
.col1 
{ 
    width: 300px; 
} 
.col2 
{ 
    width: 200px; 
} 
.col3 
{ 
    width: 100px; 
}

width: 100%;是塊元素（比如一個div）的默認行爲，所以你應該忽略它。

來源

2013-09-12 21:42:02 avrahamcool

相關問題