Html MVC将项目排成一行

因此，我正在显示列表中的项目，在internet explorer 8上，它如下所示：

1 2 3
4 5 6
7 8 9

1 
2
3
4
5

但在Internet Explorer 9上，其布局有所不同，如下所示：

1 2 3
4 5 6
7 8 9

1 
2
3
4
5

我注意到，当我删除字段集时，它修复了问题，但我希望有一种不必删除字段集的解决方法

看法

---

这里要做的是为模型中的每个项目创建一个。然后在该字段集中创建一个表行，这意味着每个项目都有一个新行。除此之外，您还试图将两个div元素和一个.box类（宽度为210px）填充到前面提到的宽度为399px的字段集中。这是行不通的

我会质疑是否需要使用字段集或表格来实现您试图实现的目标，并且会避免使用字段集或表格作为布局页面和标签以及视图中的逻辑的手段。。。但这些都是你要从这个问题中学习的东西

如果不解决您代码中的所有问题，我将执行以下操作—这绝非完美，但它展示了我的建议：

<div class="wrapper">
    @foreach (var item in Model)
    {
        <div class="container">
            <div class="box-image">
                <a href=@Url.Action("Bid", "Items", new { id = item.ItemsID })>
                    <img alt ="@item.title" src="@Url.Content(@item.image1)">
                </a>
            </div>
            <div class="box-text">
                <span><b>Title : </b>@Html.ActionLink(@item.title, "Bid", "Items", new { id = item.ItemsID }, "")</span>
                <span><b>Artist : </b>@item.artist</span>
                <span><b>Condition : </b>@item.condition</span>
                <span><b>Current Bid : </b>
                    @if (item.currentBid == 0){ 
                        <font color="#E60000"><b>No bids</b></font>
                    } else {
                        <font color="#E60000"><b>£@item.currentBid</b></font>
                    }
                </span>
            </div>
        </div>
    }
</div>

为了确保您的项目以三行显示，我必须在@foreach循环外包含一个固定宽度的“包装器”。如果你的目标是一个完全响应的网站，这不是一条路要走，但为了这个演示的目的，我包括了它

---

我已经总结了一个例子，当重复9次时它会是什么样子，但是我正在根据你问题中提供的CSS对你的布局计划做一些假设。我在IE的多个版本以及Firefox和Chrome上检查了这个解决方案，它对我来说很好。

您的字段集宽度是399px，而.box是210px。它不应该正确对齐。我尝试将两者设置为相同的宽度，但问题仍然存在，还有其他建议吗？您必须将字段集宽度设置为框*3。不幸的是，这只会使字段集变大，并且没有解决问题

.wrapper {
    width: 1200px;
}
.container {
    border: 1px solid #000000;
    background-color: #FFFFFF;
    float: left;
    margin: 1px;
    width: 396px;
}
.box-image {
    float: left;
    width: 200px;
}
.box-image a {
    height:200px;
    width:200px;
    outline: none;
}
.box-text {
    float: left;
    padding-top: 60px;
    width: 196px;
}
span {
    display: block;
}