Question

我用html和CSS制作了一个响应式照片卡，并且在照片卡中有一个相对位置的div，其中有2个嵌套的div（tag1和tag2）应显示文本。我使用左参数和底参数将它们定位为绝对值，并且在Atom中它们看起来很好。但是在Chrome或jsfiddle中，它们甚至都不会显示。同样，“更多信息”按钮应该被移到右边，但事实并非如此。我不确定自己在做什么错。我是html和CSS和响应能力的初学者。除了问题之外，如果我有什么方法可以提高响应速度，请告诉我。谢谢！

图片供参考，以供参考... screenshot

这里是JSFiddle的链接：https://jsfiddle.net/harvey02/L1a0f4e7/3/

HTML：

<div class='card_left'>
  <img src='https://images.unsplash.com/photo-1531759051464-c1e326cd6df1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f4ccdfa03552986026cd24eaf4e9756f&auto=format&fit=crop&w=1293&q=80'>

  <div class='tag_1'>
    <p>Lorem ipsum.</p>
  </div>

  <div class='tag_2'>
    <p>Lorem ipsum.</p>
  </div>

</div>


<div class='card_right'>

  <div class='m_title'>
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing.</h1>
  </div>

  <div class='data_1'>
    <p>Lorem ipsum.
      <p/>
      <H1>Lorem ipsum dolor.</h1>
  </div>

  <div class='data_2'>
    <p>Lorem ipsum.
      <p/>
      <H1>Lorem ipsum dolor.</h1>
  </div>

  <div class='m_button'>
    <a href='https://www.youtube.com/' target='_blank'>MORE INFO</a>
  </div>


</div>

CSS：

.card {
  width: 750px;
  height: 350px;
  background: transparent;
  position: absolute;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
  overflow: hidden;

}

.card_left {
  width: 350px;
  height: 350px;
  float: left;
  overflow: hidden;
  background: transparent;
  position: relative;

}

/* vignette */

.card_left:after {

  content: '';
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 150px 60px rgba(0, 0, 0, 0.6);

}

.card_left img {
  height: 100%;
  width: auto;
  border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
  position: relative;
  object-fit: cover;
}

.card_right {
  width: 380px;
  height: 350px;
  position: relative;
  float: right;
  background: #ffffff;
  padding: 0 0 0 20px;
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
}

.m_title h1 {
  color: #333333;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-align: left;
  font-size: 32px;
  margin: 10px 0 0 0;
}

.data_1 p {
  color: #333333;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  text-align: left;
  font-size: 18px;
  margin: 10px 0 0 0;
}

.data_1 h1 {
  color: #434264;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-align: left;
  font-size: 30px;
  margin: -20px 0 0 0;
}

.data_2 p {
  color: #333333;
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
  text-align: left;
  font-size: 18px;
  margin: 10px 0 0 0;
}

.data_2 h1 {
  color: #434264;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-align: left;
  font-size: 30px;
  margin: -20px 0 0 0;
}


.tag_2 p {
  color: #000000;
  background: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  border: 2px solid #69B616;
  padding: 2px 5px 2px 5px;
  font-size: 12px;
  position: absolute;
  left: 20;
  bottom: 10;
  border-radius: 5px;
  z-index: 1;
}

.tag_2 p:hover {
  color: #000000;
  background-color: white;
  transition-property: all;
  transition-duration: .5s;
}

.tag_1 p {
  color: #000000;
  background: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  border: 2px solid #69B616;
  padding: 2px 5px 2px 5px;
  font-size: 12px;
  position: absolute;
  left: 20;
  bottom: 40;
  border-radius: 5px;
  z-index: 1;
}

.tag_1 p:hover {
  color: #000000;
  background-color: white;
  transition-property: all;
  transition-duration: .5s;
}


.m_button {
  margin: 30px 0 0 0;
}

.m_button a {
  color: #434264;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  border: 2px solid #434264;
  padding: 10px 10px 10px 40px;
  position: absolute;
  left: 20;
  bottom: 20;
  font-size: 12px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/COMdoWZ.png);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 7% 50%;
  border-radius: 5px;
  transition-property: all;
  transition-duration: .5s;
}

.m_button a:hover {
  color: #000000;
  background-color: #434264;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/343086/rFQ5dHA.png);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: 10% 50%;
  cursor: pointer;
  transition-property: all;
  transition-duration: .5s;
}


@media (max-width: 500px) {

  .card {
    width: 350px;
    height: 650px;
  }

  .card_left img {
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
  }

  .card_right {
    width: 350px;
    height: 300px;
    position: relative;
    float: bottom;
    background: #ffffff;
    padding: 0 0 0 00px;
    border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
  }



  .m_title h1 {
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-align: left;
    font-size: 26px;
    margin: 10px 0 0 10px;
  }

  .data_1 p {
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: left;
    font-size: 16px;
    margin: 10px 0 0 10px;
  }

  .data_1 h1 {
    color: #434264;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-align: left;
    font-size: 28px;
    margin: -20px 0 0 10px;
  }

  .data_2 p {
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    text-align: left;
    font-size: 16px;
    margin: 10px 0 0 10px;
  }

  .data_2 h1 {
    color: #434264;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-align: left;
    font-size: 28px;
    margin: -20px 0 0 10px;
  }

  .tag_2 p {
    bottom: 310;
  }

  .tag_1 p {
    bottom: 340;
  }

}

感谢您的帮助！

Answer 1

您缺少左侧和底部偏移的“ px”。

    .tag_2 p{
      color: #000000;
      background: rgba(255, 255, 255, .7);
      text-decoration: none;
      font-family: 'Montserrat', sans-serif;
      border: 2px solid #69B616;
      padding: 2px 5px 2px 5px;
      font-size: 12px;
      position: absolute;
      left: 20px;
      bottom: 10px;
      border-radius: 5px;
      z-index: 1;
    }
.tag_1 p {
      color: #000000;
      background: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      font-family: 'Montserrat', sans-serif;
      border: 2px solid #69B616;
      padding: 2px 5px 2px 5px;
      font-size: 12px;
      position: absolute;
      left: 20px;
      bottom: 40px;
      border-radius: 5px;
      z-index: 1;
    }

我将元素定位为绝对元素，但未显示

1 个答案: