レスポンシブル・プロダクト・カードの作成方法

私のウェブサイト用の製品カードを作成していますが、ホバーに関する簡単な説明が表示されますが、現在の説明に適応させることができず、結果としてボタンがカードから飛び出します。レスポンシブル・プロダクト・カードの作成方法

現時点では私の寸法は固定されていますが、私は現在の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コードに1つの余分なdivといくつかの 'ids'しか含んでいませんでした。 67はあなたのCSSからの 'hot-topics'と' topics'の高さの差です。また、作業するはずの完全なhtml b'cozを試しましたか？ – a1626

あなたのjsFiddleを見て、あなたのカードはCodepenが使用するカードのように見えます。私はCodepenのコードを見ており、カードのサイズは固定されています。彼らはiframeを介してコンテンツをロードするため、そのボタンが親をオーバーフローさせない理由があります。私はそれが助けて欲しい

出典

2016-06-14 14:10:55

レスポンシブル・プロダクト・カードの作成方法

答えて

関連する問題