Question

我正在尝试使用div来以表格格式布置一组图像。我有一个图像，然后我想在图像下面放一个删除链接。但我无法正确布局。这就是我所拥有的：

<div class="container">
    @foreach (var item in Model)
    {
        <div class="imagetiles">
            <img src="@Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />

            <a>Delete</a>
        </div>

    }
</div>

我的样式看起来像这样，我从下面评论中提到的Fiddler中复制了它。小提琴手有效，但是当我应用它时，它不起作用。

    div.container {
    width:100%;
}
div.imagetiles {
    display:inline-block;
    margin:10px;
}
div.imagetiles a {
    display:block;
    text-align:right;
    width: 30%;
}

以下是此呈现方式。我想让它将图像彼此相邻，最多每行3个。为什么Fiddler不为此工作呢？为什么影像div如此之大，我无法将其缩小以适应图像？

enter image description here

Answer 1

如果你想要每行三个，我会将图像容器（不是主要的容器）设置为33％，然后使每个图像的宽度控制它周围的间距（类似于填充）。像这样：

div.container {
    width:100%;
    margin:0;  /* make sure there is no padding or margin on container */
    padding:0;
}
div.container div.imagetiles {
    float:left;
    width:33%;
    padding:0;
}
div.container div.imagetiles img {
    width: 95%;
    margin: 10px;
}
div.imagetiles a {
    display:block;
    text-align:right;
    width: 100%;
}

演示：http://jsfiddle.net/Gd2V6/

如果您使用LESS（推荐或SASS）之类的东西：

div.container {
    width: 100%;
    margin:0; padding:0;

    div.imagetiles {
      float:left;
      width: 100%;
      padding:0;

      img {
         width: 95%;
         margin:10px;
      }

      a {
        display:block;
        text-align:right;
        width: 100%;  /* may need to tweak this */
      }
    }
}

Answer 2

在未定义display时，我们需要维护一些小事。

此外，我们需要分析在此中发挥重要作用的元素的position:属性。

添加上面的内容之后，我已经为元素添加了z-index，并且完成了!!。

看看这个fiddle

CSS：

div.container {
    display:block;
    width:100%;
    position:relative;
}
div.imagetiles {
    display:inline-block;
    margin:10px 5px;
    float:left;
}
div.imagetiles img{
    position:relative;
    display:inline-block;
    z-index:1;
}
div.imagetiles a {
    height:25px;
    width:50px;
    position:relative;
    display:inline-block;
    float:right;
    top:-25px;
    left:-50px;
    z-index:10;
}

Answer 3

您的实施是可以的。你只需要增加图像的宽度

像：

div.imagetiles { display:inline-block; width:30%; margin:10px; }

它会像魅力一样工作：）

.NET MVC在使用删除标记布置图像时遇到问题

3 个答案: