Question

我有以下问题，涉及使用CSS和HTML在图像周围放置文本。只要文本没有通过图像，我写的方式就可以正常工作。问题是，只要它溢出＆＃34;超出图像的底部，它一直是合理的，看起来真的很草率。

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

注意：我必须删除原始照片以防止共享个人信息，并且替换照片最终变得更高一些，所以我不得不复制并粘贴文本几次以使其足够长以显示内容我正在谈论。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这里你去JSFiddle link

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

Answer 2

您需要添加的是：

.g2 {
   display: flex;
}
.photo {
  min-width: 25%;
}

＆＃13;

.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;
}
.g2 {display: flex;}
.photo {
	min-width: 25%;
}

＆＃13;

<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>

＆＃13;

在此处查看（SO片段似乎已关闭）：https://jsfiddle.net/websiter/9d40ap7c/

如果您想要固定尺寸，请随意在任何单位中提供图片min-width。

使用HTML和CSS在图像周围对齐文本

2 个答案: