Question

所以我在列表中显示项目，在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;
}

Answer 1

您在此处所做的是为模型中的每个项目创建<fieldset>。然后，您在该字段集中创建一个表行，这意味着每个项目都有一个新行。最重要的是，您尝试将两个div元素与一个宽度为210像素的.box类填充到前面提到的宽度为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;
}

为了确保您的商品以三行显示，我必须包含一个固定宽度的包装＆＃39;在@foreach循环之外。如果你的目标是一个完全响应的网站，这不是要走的路，但为了这个演示的目的，我把它包括在内。

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

MVC连续排列项目

1 个答案: