Question

我在使用以下代码时遇到了一些问题。想法是拥有一行三个图像，每个图像包含在其自己的部分标记中，然后有另一部分直接显示在其上。实际上，这里有两个问题，因为类别链接没有对齐居中而是左对齐，而且，div出现在img下面而不是它上面。这是响应，所以我不能只设置一个固定的高度，我已经尝试过高度：100％;部分功能 - 第三，无济于事。话虽这么说，这是我现在使用的代码：

首先是HTML：

 <section class="feature-third fade-in two">
 <a href="#" title="">
 <img width="960" height="960" src="img.jpg" class="attachment-full wp-post-image" alt="" />
 <section class="feature-caption"><p class="category-link">Category Name</p>    <h2>Title of Article</h2></section>
 </a>
 </section>

现在的CSS：

.feature-third { float: left; width: 33.333%; color: #FFF; overflow: hidden; display: block; }
.feature-third a img { opacity: 1; transition: transform 0.25s ease-in-out 0s, opacity 0.25s ease-in-out 0s; }
.feature-third a:hover img, .feature-third a:hover img { opacity: 0.75; transform: scale(1.1, 1.1); }
.feature a, .feature-third a { color: #FFF; text-decoration: none; }
.feature-third .feature-caption {
    position: absolute;
    z-index: 100;
    text-align: center;
    width: 100%;
    left: 0px;
    bottom: 0px;
    color: #FFF;
    padding-bottom: 10px;
    background: transparent linear-gradient(to bottom, transparent 0%, transparent 1%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0% 0%;
}
.feature-third .feature-caption .category-link {
    background: #000;
    border-radius: 14px;
    display: inline-block;
    padding: 4px 10px;
    min-width: 90px;
    height: 31px;
    line-height: 31px;
    color: #FFF;
    font-size: 11px;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
}

Answer 1

我无法解决您的代码问题，也许有一些我不理解的问题。但是根据你的代码，我做了一个小提示：http://jsfiddle.net/5p2pztqr/

我不明白在这里添加宽度的目的：

.feature-third { 
    width: 33.333%; 
}

希望它可以帮助你：）

Answer 2

解决了！这是我用来使其工作的新代码。

首先，我交换了标题的HTML和图像的定位：

 <section class="feature-third fade-in two">
 <a href="#" title="">
 <section class="feature-caption"><p class="category-link">Category Name</p>    <h2>Title of Article</h2></section>
 <img width="960" height="960" src="img.jpg" class="attachment-full wp-post-image" alt="" />
 </a>
 </section>

然后在CSS中进行了这些更改：

然后添加位置：相对于我的功能第三列：

body.home .feature-third { position: relative; float: left; width: 33.333%; color: #FFF; overflow: hidden; display: block; }

那很有用！

无法让div / section显示在响应式img元素上

2 个答案: