html - css 列和内容

Question

这可能是最常被问到的问题，但我真的无法找到任何似乎对我有用的东西——我是一个新手@styling/css。

我想要一个兼容跨浏览器的解决方案(顺便说一句，IE9 或更高版本)，我可以在其中将 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 与 Razor 一起使用，所以我只是使用 for 循环遍历数据集合并将其吐出到一个 div 中，即:

[for loop here]

   <div id="refitem_@counter">
      [data here]
   </div>
[end for loop]

Answer 1

您可以继续使用相同的方法。

<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%; 是 block 元素(如 div)的默认行为，因此您应该忽略它。