Question

我正在尝试添加带边框的标记作为我正在制作的图库网格前面的图层。

我的代码是：

HTML 的

<div class="wrap">
    <div class="grid-item25"> <a href="#" class="bordered">
            &nbsp;
        </a>

        <img src="http://placehold.it/400x400" />
        <a href="#" style="display:block;">test</a>        
    </div>
    <div class="grid-item25"> <a href="#" class="bordered">
            &nbsp;
        </a>
        <img src="http://placehold.it/400x400" />
        <a href="#" style="display:block;">test</a>
    </div>
</div>

CSS

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

.wrap {
    max-width: 100%;
    width: 100%;
    background-color: black;
}
.wrap:after {
    content:"";
    display: table;
    clear: both;
}
.grid-item25 {
    max-width: 25%;
    min-height: 202px;
    float: left;
    display: block;
    padding: 5px;
    position: relative;
}
.bordered {
    text-decoration: none;
    position: absolute;
    z-index: 90000;
    border:1px solid white;
    left: 1rem;
    right: 1rem;
    top:1rem;
    bottom:1rem;
}

结果如下：http://jsfiddle.net/ditikos/7LGBD/但问题是边框而不是停留在图像的底部（在0.5rem处）它也溢出到文本。

有人可以帮助我理解为什么会发生这种情况并且它不会停留在应有的位置吗？

由于

Answer 1

只需替换有边界的类：

.bordered {
    text-decoration: none;
    position: absolute;
    z-index: 90000;
    border:1px solid white;
    left: 1rem;
    right: 1rem;
    top:1rem;
    bottom:1rem;
    margin: 0 0 1.5rem 0;
}

并且会做你想要的。

Answer 2

如果您为height提供class bordered，问题就会得到纠正..

<强>例如

.bordered
 {
   height: 47%;
 }

小提琴是：http://jsfiddle.net/7LGBD/1/

这只是一个示例方式......如果您对此不感兴趣，请忽略..

css边框溢出到文本

2 个答案: