1

このようなイメージアイテムボックスを作りたいデザインテクニックにこだわっています

ここに画像の説明を入力

実際の画像の最大高さは300px、幅は225pxです。画像とテキストを含むアイテム ボックスの幅と高さは190px x 190pxです。

画像アイテムを使用overflow: hiddenして、下の高さを非表示にして画像テキストを表示しようとしました。しかし、私はこのようになっていますhttp://jsfiddle.net/Dkh4q/

誰か私が犯した過ちを教えてもらえますか?

ありがとう！

アップデート

予想される結果の詳細については、zerply にログインできる場合は、たとえばhttp://zerply.com/christievdc/portfolioを確認してください。

まとめ

最後に、余分な}をaddmenu-itemに追加したのはばかげた間違いです。回答ありがとうございます！

4

4 に答える 4

1

これを試してみてください。幅と高さが可変の場合は、javascript を使用する必要があります。

.addmenu-item {
margin-top:25px;
float:left;
overflow:auto;
background: #F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-moz-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-o-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}
于 2012-06-24T14:59:20.143 に答える
1

こんにちは、この要素に余分な{があります:

.addmenu-item {
width: 190px;
height: 190px;
background: #F4F4F4;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-moz-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
-o-transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
transition: color 50ms cubic-bezier(0.470, 0.000, 0.745, 0.715);
}
} <--------

これを削除して、作業する必要があります。

于 2012-06-24T15:12:46.587 に答える
0

プラグインまたはjQuery関連のものを使用しているかどうかはわかりませんが、以下が役立つことを願っています。

<style type="text/css">
    .container{
         border: 1px solid #CCC;
         border-radius: 8px;
         height: 190px;
         width: 190px;
         float: left;
     }
    .container .image{
         height: 160px;
         width: 190px;
         overflow: hidden;
     }
    .container .caption{
         font-weight: bold;
         color: #666;
         background-color: #CCC;
         height: 14px; /* height 30px; */
         padding: 8px 6px;
     }
     .shadow{
         box-shadow: 4px 4px 10px #AAA; /* adds a nice little shadow */
     }
</style>

<div class="container shadow">
    <div class="image"><img src="..."/></div>
    <div class="caption">Text goes here</div>
</div>
于 2012-06-24T15:04:45.450 に答える