css-如何在图像网格上放置文本和按钮？

Question

我创建了一个包含 5 个图像的 CSS 网格布局，如下所示：

我想要实现的目标如下：

但是，我正在使用 CSS 网格，想知道是否可以在不使用边距的情况下实现这一目标？

我需要文本和按钮位于每个图像的底部，并且字体大小应该不同，因为每个图像的分辨率不同。有没有一种方法可以优雅地实现这一点，而不会让我的代码看起来一团糟？

有什么办法可以根据图像的大小优雅地实现这一点吗？

Answer 1

模型中的文本看起来就像单击时会去某个地方，因此它是一个链接，而不是一个按钮。每个都.wrapper > div已经相对定位，使其成为任何绝对定位子项的边界容器。因此，您可以添加一个链接.wrapper > div并将其固定到每个网格单元的底角。您需要添加的内容如下。然后你可以根据自己的喜好设计风格：.wrapper>div>a {&nbsp; position: absolute;&nbsp; bottom: 10px;&nbsp; right: 10px;&nbsp; color: white;&nbsp; text-decoration: none;}然后是HTML：<div class=" bed">&nbsp; <img src="{{asset('/images/Home_Bed.jpg')}}" alt="">&nbsp; <a href="#">Label <span class="">➡</span></a></div>.bed {&nbsp; grid-column: 1/-1;&nbsp; grid-row: 1 / -3;}.pillow {&nbsp; grid-column: 3;&nbsp; grid-row: 1 / 3;}.kitchen {&nbsp; grid-column: 3;&nbsp; grid-row: 2 / 5;}.living-room {&nbsp; grid-column: 1 / 3;&nbsp; grid-row: 3 / -1;}.sofa {&nbsp; grid-column-start: 3;&nbsp; grid-row: 5 / -1;}.wrapper {&nbsp; display: grid;&nbsp; grid-template-columns: 3fr 2fr 3fr;&nbsp; grid-template-rows: repeat(8, 1fr);&nbsp; padding: 5em;&nbsp; grid-gap: 2.5em;&nbsp; background-color: black;&nbsp; height: 900px;&nbsp; max-width: 100%;}.wrapper>div {&nbsp; position: relative;}.wrapper>div>a {&nbsp; position: absolute;&nbsp; bottom: 10px;&nbsp; right: 10px;&nbsp; color: white;&nbsp; text-decoration: none;}.wrapper>div::after {&nbsp; position: absolute;&nbsp; transform: translate(-50%, -50%);&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; background-color: black;&nbsp; color: white;&nbsp; padding: .5rem;}.bed {&nbsp; grid-column: 1/2;&nbsp; grid-row: 1/3;&nbsp; height: 110%;&nbsp; width: 100%;}.pillow {&nbsp; grid-column: 2;&nbsp; grid-row: 1 / 3;&nbsp; height: 110%;&nbsp; width: 90%;}.kitchen {&nbsp; grid-column: 3;&nbsp; grid-row: 2 / 5;}.living-room {&nbsp; grid-column: 1 / 3;&nbsp; grid-row: 3 / -1;}.sofa {&nbsp; grid-column-start: 3;&nbsp; grid-row: 5 / -1;}img {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; border-radius: 20px;}body {&nbsp; background-color: black;}.container {&nbsp; position: relative;}.heading-part {&nbsp; border-bottom: 3px solid #e5e5e5;&nbsp; display: inline-block;&nbsp; width: 100%;}.main-title {&nbsp; margin-bottom: 0;&nbsp; font-size: 1.5rem;&nbsp; float: left;&nbsp; text-transform: uppercase;}.main-title::after {&nbsp; border-bottom: 3px solid #552244;&nbsp; content: "";&nbsp; display: block;&nbsp; margin-bottom: -3px;&nbsp; padding: 2px;}<div class="wrapper">&nbsp; <div class=" bed">&nbsp; &nbsp; <img src="{{asset('/images/Home_Bed.jpg')}}" alt="">&nbsp; &nbsp; <a href="#">Label <span class="">➡</span></a>&nbsp; </div>&nbsp; <div class="pillow"><img src="{{asset('/images/Home_Pillow.jpg')}}" alt=""><a href="#">Label <span class="">➡</span></a></div>&nbsp; <div class=" kitchen"><img src="{{asset('/images/Home_Kitchen.jpg')}}" alt=""><a href="#">Label <span class="">➡</span></a></div>&nbsp; <div class=" living-room"><img src="{{asset('/images/Shop_Page.jpg')}}" alt=""><a href="#">Label <span class="">➡</span></a></div>&nbsp; <div class=" sofa"><img src="{{asset('/images/Home_Sofa.jpg')}}" alt=""><a href="#">Label <span class="">➡</span></a></div></div>jsfiddle

Answer 2

Hope this will work...HTML-<div class="wrapper">&nbsp; &nbsp; <div class="bed">&nbsp; &nbsp; &nbsp; &nbsp; <span>[your text here]&nbsp;<button>[button]</button></span>&nbsp; &nbsp; &nbsp; &nbsp; <img src="{{asset('/images/Home_Bed.jpg')}}" alt="">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="pillow">&nbsp; &nbsp; &nbsp; &nbsp; <span>[your text here]&nbsp;<button>[button]</button></span>&nbsp; &nbsp; &nbsp; &nbsp; <img src="{{asset('/images/Home_Pillow.jpg')}}" alt="">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="kitchen">&nbsp; &nbsp; &nbsp; &nbsp; <span>[your text here]&nbsp;<button>[button]</button></span>&nbsp; &nbsp; &nbsp; &nbsp; <img src="{{asset('/images/Home_Kitchen.jpg')}}" alt="">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="living-room">&nbsp; &nbsp; &nbsp; &nbsp; <span>[your text here]&nbsp;<button>[button]</button></span>&nbsp; &nbsp; &nbsp; &nbsp; <img src="{{asset('/images/Shop_Page.jpg')}}" alt="">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="sofa">&nbsp; &nbsp; &nbsp; &nbsp; <span>[your text here]&nbsp;<button>[button]</button></span>&nbsp; &nbsp; &nbsp; &nbsp; <img src="{{asset('/images/Home_Sofa.jpg')}}" alt="">&nbsp; &nbsp; </div></div>CSS-.wrapper > div {&nbsp; &nbsp; position: relative;}.wrapper div span {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: 10px;&nbsp; &nbsp; right: 10px;&nbsp; &nbsp; z-index: 1;}