0

这可能是最常被问到的问题，但是我真的找不到任何对我有用的东西——我是一个新手@造型/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]
4

1 回答 1

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）的默认行为，因此您应该省略它。

于 2013-09-12T21:42:02.237 回答