如何創建響應式產品卡片？

我爲我的網站創建了一些產品卡片，該卡片將顯示關於懸停的簡短描述，但我無法讓它們適應當前的描述，從而導致按鈕被扔出卡片。如何創建響應式產品卡片？

目前我的尺寸是固定的，但我嘗試將當前的height設置爲min-height，但沒有成功。

我已經在jsFiddle中創建了一個虛擬卡，供您說明我的問題here。或者，您可以使用下面的代碼片段。

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

<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>

來源

2016-06-13 Angel Politis

你想讓你的描述進入卷軸或卡高度增加？ – a1626

我想卡高度增加@ a1626 –

你打開js解決方案嗎？ – a1626

通過在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; 
}

來源

2016-07-04 14:53:31

這裏是簡單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>

我希望這是你要找的。

來源

2016-06-13 15:36:43 a1626

您的答案不但不能正常工作，而且您還大量修改了我的HTML代碼。你在JavaScript代碼中放入了多少「67」？ –

我只在你的HTML代碼和一些'ids'中包含了一個額外的div。而67是來自你的css的'hot-topics'和'topics'的高度之間的差異。另外，你是否嘗試了完整的html b'coz應該工作 – a1626

看着你的jsFiddle，我認爲你的卡看起來像Codepen使用的卡。我看過Codepen的代碼，並且卡的大小是固定的。他們通過iframe加載他們的內容，這就是爲什麼他們的按鈕不會溢出父母。我希望它有幫助。

來源

2016-06-14 14:10:55

如何創建響應式產品卡片？

回答

相關問題