我創(chuàng)建了一個包含 5 個圖像的 CSS 網(wǎng)格布局，如下所示：我想要實現(xiàn)的目標如下：但是，我正在使用 CSS 網(wǎng)格，想知道是否可以在不使用邊距的情況下實現(xiàn)這一目標？我需要文本和按鈕位于每個圖像的底部，并且字體大小應該不同，因為每個圖像的分辨率不同。有沒有一種方法可以優(yōu)雅地實現(xiàn)這一點，而不會讓我的代碼看起來一團糟？有什么辦法可以根據(jù)圖像的大小優(yōu)雅地實現(xiàn)這一點嗎？
2 回答
MM們
TA貢獻1886條經(jīng)驗 獲得超2個贊
模型中的文本看起來就像單擊時會去某個地方，因此它是一個鏈接，而不是一個按鈕。每個都.wrapper > div已經(jīng)相對定位，使其成為任何絕對定位子項的邊界容器。因此，您可以添加一個鏈接.wrapper > div并將其固定到每個網(wǎng)格單元的底角。
您需要添加的內(nèi)容如下。然后你可以根據(jù)自己的喜好設計風格：
.wrapper>div>a {
position: absolute;
bottom: 10px;
right: 10px;
color: white;
text-decoration: none;
}
然后是HTML：
<div class=" bed">
<img src="{{asset('/images/Home_Bed.jpg')}}" alt="">
<a href="#">Label <span class="">?</span></a>
</div>
.bed {
grid-column: 1/-1;
grid-row: 1 / -3;
}
.pillow {
grid-column: 3;
grid-row: 1 / 3;
}
.kitchen {
grid-column: 3;
grid-row: 2 / 5;
}
.living-room {
grid-column: 1 / 3;
grid-row: 3 / -1;
}
.sofa {
grid-column-start: 3;
grid-row: 5 / -1;
}
.wrapper {
display: grid;
grid-template-columns: 3fr 2fr 3fr;
grid-template-rows: repeat(8, 1fr);
padding: 5em;
grid-gap: 2.5em;
background-color: black;
height: 900px;
max-width: 100%;
}
.wrapper>div {
position: relative;
}
.wrapper>div>a {
position: absolute;
bottom: 10px;
right: 10px;
color: white;
text-decoration: none;
}
.wrapper>div::after {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-color: black;
color: white;
padding: .5rem;
}
.bed {
grid-column: 1/2;
grid-row: 1/3;
height: 110%;
width: 100%;
}
.pillow {
grid-column: 2;
grid-row: 1 / 3;
height: 110%;
width: 90%;
}
.kitchen {
grid-column: 3;
grid-row: 2 / 5;
}
.living-room {
grid-column: 1 / 3;
grid-row: 3 / -1;
}
.sofa {
grid-column-start: 3;
grid-row: 5 / -1;
}
img {
width: 100%;
height: 100%;
border-radius: 20px;
}
body {
background-color: black;
}
.container {
position: relative;
}
.heading-part {
border-bottom: 3px solid #e5e5e5;
display: inline-block;
width: 100%;
}
.main-title {
margin-bottom: 0;
font-size: 1.5rem;
float: left;
text-transform: uppercase;
}
.main-title::after {
border-bottom: 3px solid #552244;
content: "";
display: block;
margin-bottom: -3px;
padding: 2px;
}
<div class="wrapper">
<div class=" bed">
<img src="{{asset('/images/Home_Bed.jpg')}}" alt="">
<a href="#">Label <span class="">?</span></a>
</div>
<div class="pillow"><img src="{{asset('/images/Home_Pillow.jpg')}}" alt=""><a href="#">Label <span class="">?</span></a></div>
<div class=" kitchen"><img src="{{asset('/images/Home_Kitchen.jpg')}}" alt=""><a href="#">Label <span class="">?</span></a></div>
<div class=" living-room"><img src="{{asset('/images/Shop_Page.jpg')}}" alt=""><a href="#">Label <span class="">?</span></a></div>
<div class=" sofa"><img src="{{asset('/images/Home_Sofa.jpg')}}" alt=""><a href="#">Label <span class="">?</span></a></div>
</div>
POPMUISE
TA貢獻1765條經(jīng)驗 獲得超5個贊
Hope this will work...
HTML-
<div class="wrapper">
<div class="bed">
<span>[your text here] <button>[button]</button></span>
<img src="{{asset('/images/Home_Bed.jpg')}}" alt="">
</div>
<div class="pillow">
<span>[your text here] <button>[button]</button></span>
<img src="{{asset('/images/Home_Pillow.jpg')}}" alt="">
</div>
<div class="kitchen">
<span>[your text here] <button>[button]</button></span>
<img src="{{asset('/images/Home_Kitchen.jpg')}}" alt="">
</div>
<div class="living-room">
<span>[your text here] <button>[button]</button></span>
<img src="{{asset('/images/Shop_Page.jpg')}}" alt="">
</div>
<div class="sofa">
<span>[your text here] <button>[button]</button></span>
<img src="{{asset('/images/Home_Sofa.jpg')}}" alt="">
</div>
</div>
CSS-
.wrapper > div {
position: relative;
}
.wrapper div span {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 1;
}
- 2 回答
- 0 關注
- 121 瀏覽
添加回答
舉報
0/150
提交
取消