html - MVC 连续排列元素

Question

所以我正在显示列表中的元素，在 Internet Explorer 8 上它如下所示:

1 2 3
4 5 6
7 8 9

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

1 
2
3
4
5

我注意到当我删除字段集时它修复了问题，但我想要一种无需删除字段集的解决方法。

查看

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

Answer 1

您在这里所做的是创建一个 <fieldset>对于模型中的每个元素。然后，您将在该字段集中创建一个表行，这意味着您为每个元素创建了一个新行。最重要的是你然后试图补习两个div类别为 .box 的元素，宽度为 210px，放入上述宽度为 399px 的字段集中。这是行不通的。

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

在不解决我对您的代码的所有问题的情况下，我会做类似以下的事情(这绝不是完美的，但它证明了我的建议):

<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 上检查了这个解决方案，它对我来说工作正常。