将共享 div 定位为如上图所示对我来说是一个挑战。好吧，我尝试了 positionabsolute 与 bottom 和 left 调整 px 非常令人沮丧，但输出总是堆叠在顶部或底部。我怎样才能实现图片中类似的输出？

: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: ;
}


  
    
  
  
    
      
        Shift the overall look and feel by adding these wonderful touches to furniture in your home
      
      
        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.
      
    
    
      
        
      
      
        Michelle Appleton
        28 Jun 2020
      
      
        
          
        
        
          Share

: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; }

Shift the overall look and feel by adding these wonderful touches to furniture in your home

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.