照片和文字定位 CSS+HTML答案

【问题标题】：Photo and Text positioning CSS+HTML照片和文字定位 CSS+HTML
【发布时间】：2016-04-23 17:18:55
【问题描述】：

如何对照片和文字进行风格化，以产生如下示例照片所示的效果。有什么想法吗？

CLICK HERE FOR EXAMPLE

【问题讨论】：

你有什么尝试吗？请阅读：How to ask
这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

标签： html css web

【解决方案1】：

我认为这就是你所需要的？

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>

【讨论】：

【解决方案2】：

实际上，您可以采用 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>

【讨论】：