照片和文字定位CSS + HTML

Question

如何在我的示例照片中显示照片和文字以使效果如下所示。有任何想法吗？

CLICK HERE FOR EXAMPLE

Answer 1

其实有很多种方法，你可以去了10的。我本来可以在HTML5中使用<figure>。所以，这里是相同的代码。

.card{ 
 
    width:200px; 
 
} 
 
.card-image{ 
 
    display:block; 
 
    border-top-left-radius: 8px; 
 
    border-top-right-radius: 8px; 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.bottom-caption{ 
 
    font-size:18px; 
 
    line-height:24px; 
 
    text-align:center; 
 
    background:black; 
 
    color:white; 
 
    font-weight:bold; 
 
    font-family:sans-serif; 
 
    padding: 4px 0; 
 
    border-bottom-left-radius: 8px; 
 
    border-bottom-right-radius: 8px; 
 
}

<figure class="card"> 
 
    <img src="https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/399_bootstrap_sass/preview.png" alt="sass" class="card-image"> 
 
    <figcaption class="bottom-caption"> 1 MEMBER </figcaption> 
 
</figure>

Answer 2

我认为这是你需要什么？

https://jsfiddle.net/ev0op09q/2/

@import url(https://fonts.googleapis.com/css?family=Roboto:700,400); 
body { 
    font-family: 'Roboto', sans-serif; 
} 
.img-container { 
    width:200px; 
    border-radius:5px; 
    overflow: hidden; 
    float:left; 
} 
.img-name{ 
    background: #000; 
    color: #fff; 
    margin: -4px 0 0; 
    padding: 10px 0; 
    text-align: center; 
    line-height:16px; 
    font-weight:700; 
} 
.content { 
    width:200px; 
    float:left; 
    margin-left:30px; 
} 
a { 
    text-decoration:none; 
} 

<div class="img-container"> 
<img src="http://lorempixel.com/image_output/cats-q-c-200-200-3.jpg" alt="cat"> 
<p class="img-name">Cool cat</p> 
</div> 
<div class="content"> 
    <h1>Cats love you</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
    <a href="#">Click me</a> 
</div>