html - 使用 HTML 和 CSS 对齐图像周围的文本

Question

我有以下问题涉及使用 CSS 和 HTML 在图像周围放置文本。只要文本不通过图像，我编写它的方式就有效。问题是，一旦它“溢出”到图像底部之外，它就会一直向左对齐，看起来非常草率。

如何使图像底部下方的文本与之前的文本对齐？

注意:我不得不删除我的原始照片以防止泄露个人信息，而替换的照片最后有点高，所以我不得不复制并粘贴几次文字以使其足够长以显示什么我在说。

这是包含我所有代码的 jsfiddle 示例:https://jsfiddle.net/dLa9jgcm/2/

.photo {
  float: left;
  height: 200px;
  width: 200px;
  margin-right: 20px;
  overflow: hidden;
}

.photo img {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
}

.info {}

.info h2,
#header h2 {
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: .3em;
}

.info h4,
#header h4 {
  color: #999;
}

<div id="tab-data-wrap">
  <!-- About Tab Data -->
  <div id="about">
    <section class="clearfix">
      <div class="g2">
        <div class="photo">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Olympic_rings_without_rims.svg/342px-Olympic_rings_without_rims.svg.png" alt="Olympic Rings">
        </div>
        <div class="info">
          <h2>
            Zeus
          </h2>
          <h4>
            Associate Financial Advisor
          </h4>
          <p>Providing expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing
            expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives. Providing
            expert advice and guidance on investments and retirement planning in conjunction with high level service to individuals and families so that they have the peace-of-mind to pursue other important endeavors throughout their lives.</p>
          <br> I am a Certified Financial Planner (CFP®).

        </div>

Answer 1

给你JSFiddle link

.info{
    float: left;
    width: calc(100% - 220px);/*value should be equal to width of image along with margin*/
}