Question

我正在尝试创建一张像图片中所示的卡片。但是我无法在卡上创建浮动图像。任何有关如何使用angular，jquery，css或带有示例代码的免费插件来实现效果的指导将不胜感激。

Card Image

目前我正在使用物化框架。

我用来制作卡片的代码是：

`

<div class="col s6">
                        <div class="card card white lighten-1 horizontal" style="height: 300px; width: 500px;">
                        <div class="card-image">
                        <img src="assets/dark_murder.jpg">
                        </div>
                        <div class="card-content grey-text">
                        <span class="card-title">Dark Murder</span>
                        <div class='starrr' id='star1'></div>
                        <p>Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                        <div class="card-action">
                        <a href="#">This is a link</a>
                        </div>
                        </div>
                        </div>
                      </div> 

`

The css is this:
`
.card-image img {
 position: absolute;
    bottom: 8px;
    left: 16px;
    height: 100%;
}
.card-title {
  padding-left: 20px;
}`

我已经实现了这个目标： Card so far

Answer 1

您可以使用bootstrap轻松创建。

<强> HTML

<div class="card-content">
   <h2> Ttitle goes here</h2>
   <p>Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit, 
      sed do eiusmod tempor incididunt ut 
      labore et dolore magna aliqua.</p>
      <a href=""> Cleck here to read more</a>
 </div>

<强> CSS

.card {
  background-color: #bdbdbd;
  margin: 30px 0;
  padding: 30px 0;
  overflow: hidden;
}

查看演示：http://codepen.io/sifulislam/pen/XjrajE

浮动/弹出图像

1 个答案: