MVC 连续排列项目答案

【问题标题】：MVC Arranging items in a rowMVC 连续排列项目
【发布时间】：2014-10-17 09:52:30
【问题描述】：

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

1 2 3
4 5 6
7 8 9

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

我注意到，当我删除字段集时，它可以解决问题，但我想要一种解决方法，而不必删除字段集。

查看

@foreach (var item in Model)
{
    <fieldset style="width:399px; height:210px; border:1px; border-color:Black; background-color:White">    
    <tr>
        <td> <div class="box"><a href=@Url.Action("Bid", "Items", new { id = item.ItemsID })>
        <img alt ="@item.title" width="200px" height="200px" src="@Url.Content(@item.image1)" /></a></div>
        </td>
        <td><div class="box"><br /><br />   <b>Title : </b>@Html.ActionLink(@item.title, "Bid", "Items", new { id = item.ItemsID }, "") 
        <br /><b>Artist : </b>@item.artist<br />
        <b>Condition : </b>@item.condition<br /><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> }<br /><p></p>
        </div>
        </td>
        </tr>   
    </fieldset>
}

CSS

.box  
{
padding: 15px 0px 0px 0px;
width:210px;
float: left;
height:150px;
}

【问题讨论】：

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

标签： html css razor model-view-controller

【解决方案1】：

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

我会质疑是否需要使用字段集或表格来实现您想要实现的目标，并且会避免使用<br /> 作为布局页面的一种方式（以及<font> 标签和视图中的逻辑.. .) 但这些是你要从这个问题中学习的东西。

如果不解决我在您的代码中遇到的所有问题，我会执行以下操作（它绝不是完美的，但它展示了我的建议）：

<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>

根据您提供的内容，我的 CSS 如下所示：

.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;
}

为了确保您的项目以三行显示，我必须在@foreach 循环之外包含一个固定宽度的“包装器”。如果您的目标是建立一个完全响应的网站，这不是可行的方法，但出于本演示的目的，我将其包括在内。

我已经拼凑了JSFiddle 重复九次时的外观，但我正在根据您问题中提供的 CSS 对您的布局计划做出一些假设。我在多个版本的 IE 以及 Firefox 和 Chrome 中检查了这个解决方案，它对我来说效果很好。

【讨论】：