Question

我尝试了一些事情，但似乎无处可去，我可以通过更改“＃”位置来移动文本。标签，但这似乎导致文本有点消失在框边缘和奇怪的间隔..我猜我已经编码了它在较少文本上的罚款，但是当添加太多，我得到重叠..无论如何我可以改变一点点，所以它们看起来很漂亮？

网站; http://outside.hobhob.uk 参考将鼠标悬停在网格中的投资组合项目时显示的文本。我需要标题保持在顶部，但避免下面的描述与标题重叠。

网格部分的代码段;

            <div class="portfolio-item item tile entry">
                <a href="single.html">
                    <img src="content/portfolio_07.png" alt="">
                   <div class="magnifier">
                        <div class="buttons">
                         <h4>Melbourne Design Guide</h4>
                         <p>Creative mapping and Illustration for the cities annual design guide</p>
                        </div><!-- end buttons -->
                    </div><!-- end magnifier --> 
                </a>
            </div><!-- end item -->

CSS我正在看..也许这就是我出错的地方？

.buttons.blog-style p,
.magnifier p,
#gallery .caption p {
    background-color: transparent;
    border-color: rgb(0, 0, 0);
    border-style: none;
    border-width: 0;
    font-weight: 500;
    bottom: 20px;
    color: rgb(0, 0, 0);
    font-family: "Raleway";
    font-size: 16px !important;
    left: 30px;
    line-height: 28px;
    position: relative;
    text-decoration: none;
    text-transform: none !important;
    text-shadow: none;
}
.buttons.blog-style h4,
.magnifier h4,
#gallery .caption h3 {
font-size:28px !important;
line-height:28px;
font-family:"HighVoltage" !important;
display: inline-block;
color: rgb(0, 0, 0);
position:absolute;
left:30px;
bottom:60px;
text-decoration:none;
text-transform: none !important;
background-color:transparent;
text-shadow:none;
border-width:0px;
border-color:rgb(0, 0, 0);
border-style:none;

}

Answer 1

我想你希望h4始终位于.button的底部，如果我理解你想要这样的东西：

<强> jsfiddle

如果某个商品具有绝对位置且您不希望它与其他商品重叠，则需要为该商品创建一个空间。

你需要添加这个css才能工作

.buttons { 
  position:relative
}
.buttons.blog-style p,
.magnifier p,
#gallery .caption p {
  padding-bottom:88px;
}
.buttons.blog-style h4,
.magnifier h4,
#gallery .caption h3 {
  margin:0;
}

其中88px是您对说明的bottom:60px与说明的高度之间的总和line-height:28px;

我在说明中添加了margin:0因为它不再需要了。但是如果你想保留这个余量......将它添加到padding-bottom:88px

文本在悬停时与太多文本重叠

1 个答案: