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

回答

相关问题