Die gemeinsame Positionierung wie oben gezeigt war für mich eine Herausforderung. Nun, ich habe versucht positionabsolute 与 bottom 和 left, die Pixel anzupassen, was sehr frustrierend war, aber die Ausgabe wird immer oben oder unten gestapelt. Wie kann ich eine ähnliche Ausgabe wie auf dem Bild erzielen?
:root {
--VeryDarkGrayishBlue: hsl(217, 19%, 35%);
--DesaturatedDarkBlue: hsl(214, 17%, 51%);
--GrayishBlue: hsl(212, 23%, 69%);
--LightGrayishBlue: hsl(210, 46%, 95%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Manrope", sans-serif;
}
body {
background-color: var(--GrayishBlue);
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: 2fr 3fr;
max-width: 1150px;
max-height: 390px;
margin: auto;
background-color: white;
overflow: hidden;
border-radius: 0.8em;
}
.img-box {}
.img-box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text-box {
padding: 8%;
}
.text {
padding-bottom: 30px;
}
.title {
color: var(--VeryDarkGrayishBlue);
padding-bottom: 10px;
}
.subtitle {
color: var(--GrayishBlue);
font-size: 1.1em;
}
.writer img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
}
.name {
margin-left: 12px;
}
.name h4 {
color: var(--VeryDarkGrayishBlue);
}
.name p {
color: var(--GrayishBlue);
}
.share {
margin-left: auto;
}
.share-icon button {
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--LightGrayishBlue);
cursor: pointer;
}
.share-option {
width: 250px;
height: 40px;
background: var(--VeryDarkGrayishBlue);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
position: absolute;
bottom: ;
}
<main class="container">
<div class="img-box">
<img src="/images/drawers.jpg" alt="" />
</div>
<div class="text-box">
<div class="text">
<h1 class="title">
Shift the overall look and feel by adding these wonderful touches to furniture in your home
</h1>
<p class="subtitle">
Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.
</p>
</div>
<div class="footer">
<div class="writer">
<img src="/images/avatar-michelle.jpg" alt="" />
</div>
<div class="name">
<h4>Michelle Appleton</h4>
<p>28 Jun 2020</p>
</div>
<div class="share">
<div class="share-icon">
<button><img src="/images/icon-share.svg" alt=""></button>
</div>
<div class="share-option hidden">
<span>Share</span>
<a href="#"> <img src="/images/icon-facebook.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-pinterest.svg" alt=""> <a/>
<a href="#"> <img src="/images/icon-twitter.svg" alt=""> <a/>
</div>
</div>
</div>
</div>
</main>
我对代码进行了一些更改，并使用
absolute使弹出窗口可见。:root { --VeryDarkGrayishBlue: hsl(217, 19%, 35%); --DesaturatedDarkBlue: hsl(214, 17%, 51%); --GrayishBlue: hsl(212, 23%, 69%); --LightGrayishBlue: hsl(210, 46%, 95%); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Manrope", sans-serif; } body { background-color: var(--GrayishBlue); display: flex; flex-direction: column; min-height: 100vh; padding: 20px; } .container { display: grid; grid-template-columns: 2fr 3fr; max-width: 1150px; max-height: 390px; margin: auto; background-color: white; border-radius: 0.8em; } .container:after { display: block; content: ''; clear: both; } .img-box {} .img-box img { width: 100%; height: 100%; object-fit: cover; } .text-box { padding: 8%; } .text { padding-bottom: 30px; } .title { color: var(--VeryDarkGrayishBlue); padding-bottom: 10px; } .subtitle { color: var(--GrayishBlue); font-size: 1.1em; } .writer img { width: 50px; height: 50px; border-radius: 50%; } .footer { display: flex; flex-direction: row; align-items: center; } .name { margin-left: 12px; } .name h4 { color: var(--VeryDarkGrayishBlue); } .name p { color: var(--GrayishBlue); } .share { margin-left: auto; position: relative; padding: 20px 0 0; } .share-icon button { border: none; width: 40px; height: 40px; border-radius: 50%; background-color: var(--LightGrayishBlue); cursor: pointer; } .share-option { width: 250px; height: 40px; background: var(--VeryDarkGrayishBlue); border-radius: 10px; color: white; position: absolute; bottom: 100%; right: 50%; transform: translatex(50%); visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } .share-option:after { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: var(--VeryDarkGrayishBlue); border-width: 10px; margin-left: -10px; } .share:hover .share-option { visibility: visible; opacity: 1; }