Question

这可能是最常被问到的问题，但我真的找不到任何对我有用的东西 - 我是新手@ styling / css。

我想要一个跨浏览器兼容的解决方案（IE9或更高版本的btw），我可以将其作为标题（第一行）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>

就数据而言，我使用的是带有Razor的MVC4，所以我只是使用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%;是块元素（如div）的默认行为，因此您应该省略它。

css列和内容

1 个答案: