Question

我正在为我的网站创建一些产品卡，这些产品卡会显示有关悬停的简短描述，但我无法让它们适应当前的描述，导致按钮被抛出卡片。

目前我的维度已修复，但我尝试将当前height设置为min-height并且它没有成功。

我在jsFiddle中创建了一张虚拟卡片，供您说明我的问题here。或者，您可以使用下面的代码段。

＆＃13;

#section1 > .wrapper {
  /* Text */
  text-align: justify;
}
.hot-topic {
  /* Text */
  font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  line-height: 1.5;
  font-size: 15px;
  font-weight: 400;
  /* Dimensions */
  width: 282px;
  height: 226px;
  /* Positioning */
  position: relative;
  margin-top: 50px;
  /* Styling */
  background-color: #2f2f31;
  border: 5px solid #2f2f31;
  border-radius: 2px;
  box-shadow: 2px 2px 3px;
}
.hot-topic > h3 {
  /* Text */
  color: #999999;
  font-size: 1.0rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  /* Positioning */
  margin: 5% 0 2% 3%;
  overflow: hidden;
  /* Visibility */
  display: block;
}
.topic {
  /* Dimensions */
  width: 282px;
  height: 159px;
  /* Styling */
  background-color: white;
  background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.topic:hover {
  /* Styling */
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
}
.topic:hover + .caption {
  display: block;
}
.caption {
  /* Text */
  color: #bbbbbb;
  font-size: 0.8rem;
  text-align: center;
  /* Dimensions */
  width: 265px;
  height: 159px;
  /* Positioning */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0% 3% 0 3%;
  /* Visibility */
  display: none;
  /* Styling */
  background: rgba(0, 0, 0, .8);
}
.caption:hover {
  /* Visibility */
  display: block;
}
.caption-wrapper {
  /* Text */
  text-align: justify;
}
.button {
  /* Text */
  color: #bbbbbb;
  /* Positioning */
  position: relative;
  padding: 5px 10px;
  /* Styling */
  background-color: transparent;
  border: 1px solid #bbbbbb;
  outline: none;
  /* Transitions */
  -webkit-transition: background-color .5s ease, color .5s ease;
}
.button:hover {
  /* Text */
  color: #0c0c0c;
  /* Styling */
  cursor: pointer;
  background-color: #bbbbbb;
  /* Transitions */
  -webkit-transition: background-color .5s ease, color .5s ease;
}

＆＃13;

<div class="hot-topic">
  <div class="topic">
  </div>
  <div class="caption">
    <div class="caption-wrapper">
      <p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
        <br/>
        <br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
    </div>
    <button class="button">Read More</button>
  </div>
  <h3>HP Pavilion Slimline S5 1010</h3>
</div>

＆＃13;

Answer 1

看着你的jsFiddle，我认为你的卡看起来像Codepen使用的卡。我看过Codepen的代码，卡的大小是固定的。他们通过iframe加载内容，这就是为什么他们的按钮不会溢出父母的原因。我希望它有所帮助。

Answer 2

以下是简单javascript的解决方案。我已经包含了整个html文件，因为我粘贴的代码块在代码段或其他人的本地不起作用。

 <html>
  <head>
    <style>
      #section1 > .wrapper {
        /* Text */
        text-align: justify;
      }
      .hot-topic {
        /* Text */
        font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
        line-height: 1.5;
        font-size: 15px;
        font-weight: 400;
        /* Dimensions */
        width: 282px;
        height: 226px;
        /* Positioning */
        position: relative;
        margin-top: 50px;
        /* Styling */
        background-color: #2f2f31;
        border: 5px solid #2f2f31;
        border-radius: 2px;
        box-shadow: 2px 2px 3px;
      }
      .hot-topic > h3 {
        /* Text */
        color: #999999;
        font-size: 1.0rem;
        line-height: 1.2;
        text-overflow: ellipsis;
        /* Positioning */
        margin: 5% 0 2% 3%;
        overflow: hidden;
        /* Visibility */
        display: block;
      }
      .topic {
        /* Dimensions */
        width: 282px;
        height: 159px;
        /* Styling */
        background-color: white;
        background-image: url(http://www.bhphotovideo.com/images/images2500x2500/HP_Hewlett_Packard_BV701AA_ABA_Pavilion_Slimline_s5_1010_Desktop_793042.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
      .topic:hover {
        /* Styling */
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        -ms-filter: blur(1px);
        -o-filter: blur(1px);
        filter: blur(1px);
      }
      .topic:hover + .caption {
        display: block;
      }
      .caption {
        /* Text */
        color: #bbbbbb;
        font-size: 0.8rem;
        text-align: center;
        /* Dimensions */
        width: 265px;
        height: inherit;
        /* Positioning */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0% 3% 0 3%;
        /* Visibility */
        display: none;
        /* Styling */
        background: rgba(0, 0, 0, .8);
      }
      .caption:hover {
        /* Visibility */
        display: block;
      }
      .caption-wrapper {
        /* Text */
        text-align: justify;
      }
      .button {
        /* Text */
        color: #bbbbbb;
        /* Positioning */
        position: relative;
        padding: 5px 10px;
        /* Styling */
        background-color: transparent;
        border: 1px solid #bbbbbb;
        outline: none;
        /* Transitions */
        -webkit-transition: background-color .5s ease, color .5s ease;
      }
      .button:hover {
        /* Text */
        color: #0c0c0c;
        /* Styling */
        cursor: pointer;
        background-color: #bbbbbb;
        /* Transitions */
        -webkit-transition: background-color .5s ease, color .5s ease;
      }

    </style>
  </head>
  <body>
    <div id="hot-topic" class="hot-topic">
      <div id="parentDiv">
        <div id="topic" class="topic">
        </div>
        <div id="caption" class="caption" onmouseover="changeHeight(this)">
          <div class="caption-wrapper">
            <p>This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.This HP Pavilion Slimline S5 1010, one of of the best machines Hewllett Packard has to offer.
              <br/>
              <br/>It has a 3.2GHz Intel Pentium E6700 CPU and a 750GB 7200rpm Hard Drive.</p>
          </div>
          <button class="button">Read More</button>
        </div>
      </div>
      <h3>HP Pavilion Slimline S5 1010</h3>
    </div>
    <script>
      function changeHeight(x){
        document.getElementById('parentDiv').style.height=x.clientHeight;
        document.getElementById('topic').style.height=x.clientHeight;
        document.getElementById('hot-topic').style.height=x.clientHeight+67;

      }
    </script>
  </body>
</html>

我希望这就是你要找的东西。

Answer 3

通过在JavaScript中使用以下代码，问题得以解决。

var height = $(".caption").height();
for (var i = 0; i < document.getElementsByClassName("button").length; i++) {
    height += $(".button").height();
}
for (var i = 0; i < document.getElementsByClassName("caption").length; i++) {
    document.getElementsByClassName("caption")[i].style.height = height;
}

如何创建响应式产品卡？

3 个答案: