Jekyll布局下如何让指定文本与左浮动图片的左下角边缘对齐

当前排版异常的核心原因有两点：

• 个人信息段落设置的overflow: auto会生成独立的块级格式化上下文，会和左侧浮动的头像形成并排排版关系。当这个段落排完后，浮动头像对后续元素的排版影响就会失效，后续没有清除浮动的元素会被浮动头像意外覆盖，就算手动给Education标题加了150px左边距，也会因为浮动元素的覆盖出现位置偏差。
• 手动设置的150px左边距是从容器外边缘开始计算的，没有扣除容器本身16px的左右内边距，导致Education标题的实际位置比头像右边缘还要靠右16px，没法和头像左边缘对齐。

不需要额外写复杂样式，只需要对现有代码做3处小调整即可实现目标效果：

• 删除个人信息段落上的overflow: auto样式。该样式本来的作用是防止文字环绕头像，删掉后因为头像有固定宽度，文字本身就只会排在头像右侧区域，不会下绕。
• 在个人信息段落的闭合标签后，新增一个带清除浮动样式的空占位元素，断开浮动排版的关联：<div style="clear: both; margin: 1rem 0;"></div>。这个元素会强制断开前面浮动元素的排版影响，让后续元素可以正常回到容器的左边缘位置。
• 删除Education标题段落上的margin-left: 150px样式。清除浮动后，这个标题的默认位置就会和头像左边缘完全齐平，不需要额外设置左边距。
• 保留原有Education列表、Experience列表上的overflow: hidden样式即可，无需调整。

<div class="col-sm-19">
  <img src="{{ site.url }}{{ site.baseurl }}/images/teampic/{{ member.photo }}" class="img-responsive" style="float: left;width: 150px; height:auto;border: 0" />
  <p style="margin: 0 0 0 16px"><b>{{ member.name }}</b><br>
  {{ member.info }}<br>{{member.dept}}<br>{{member.info2}}, {{member.dept2}}<br><a href="https://www.iitb.ac.in/" target="_blank">Indian Institute of Technology Bombay</a><br>Powai, Mumbai, Maharashtra<br>email: {{ member.email }}<br>Phone: {{member.phone}}
  <br>{{member.rgate}}{{member.gscholar}}</p>
  <!-- 清除浮动占位块 -->
  <div style="clear: both; margin: 16px 0;"></div>
  <p><b>Education:</b></p>
  <ul style="overflow: hidden">
  {% if member.number_educ == 1 %}
  <li> {{ member.education1 }} </li>
  {% endif %}

  {% if member.number_educ == 2 %}
  <li> {{ member.education1 }} </li>
  <li> {{ member.education2 }} </li>
  {% endif %}

  {% if member.number_educ == 3 %}
  <li> {{ member.education1 }} </li>
  <li> {{ member.education2 }} </li>
  <li> {{ member.education3 }} </li>
  {% endif %}

  {% if member.number_educ == 4 %}
  <li> {{ member.education1 }} </li>
  <li> {{ member.education2 }} </li>
  <li> {{ member.education3 }} </li>
  <li> {{ member.education4 }} </li>
  {% endif %}

  {% if member.number_educ == 5 %}
  <li> {{ member.education1 }} </li>
  <li> {{ member.education2 }} </li>
  <li> {{ member.education3 }} </li>
  <li> {{ member.education4 }} </li>
  <li> {{ member.education5 }} </li>
  {% endif %}
  </ul>
  {% if member.number_exp > 0 %}
  <b>Experience:</b>
  <ul style="overflow: hidden">
  {% if member.number_exp == 2 %}
  <li> {{ member.exp1 }} </li>
  <li> {{ member.exp2 }} </li>
  {% endif %}
  </ul>

  {% endif %}
</div>

修改后的实际效果说明：

• 头像保持150px宽度左浮动，姓名、职位、联系方式等个人信息始终排布在头像右侧区域，不会环绕到头像下方
• Education、Experience板块的所有内容从容器左边缘开始排布，和头像左边缘完全齐平，不会出现缩进偏差
• 元素之间的间距和原有视觉习惯保持一致，不会出现突兀的排版错位

内容的提问来源于stack exchange，提问作者Praneeth Lanka