如何使文本与图像的左下边缘对齐

Question

我有一个图像，在一个容器中。在图片的右侧，我有文字不会环绕在图片下方。

我还想放置一个文本，它应该始终与图像的左边缘对齐。现在，我放置的任何文本都只是在右侧文本的下方继续。我应该怎么做才能使文本位于容器的左边缘。

<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=" overflow: auto"><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>
  <p style="margin-left: 150px"><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>

A screen shot of the problem

我希望“教育：”与图像的左下边缘对齐，而 name:YOLO 和名称保留在图像的右侧

col-sm-19 左右各填充 16 像素

PS 我对 CSS 或 HTML 一无所知，我正在使用 Jekyll 构建一个网站，我只是想尝试一下代码。

Answer 1

您的问题并非 100% 清楚。但是要在图像 start 下方显示文本 ，只需从 style 的 style 属性中删除 float: left; 13=] 标签。

在 comment/clarification 之后编辑：

将 clear: left 添加到要移动到图片下方的段落：

<p style="clear:left;"><b>Education:</b></p>

（并从中删除 margin-left）

Answer 2

从 img 中删除 float-left 并在 img 样式中添加 display:block

这会为 img 创建一个单独的块，您的文本将始终显示在左侧的 img 之后

如何使文本与图像的左下边缘对齐

How do I make a text align with the bottom left edge of an image

html

css

jekyll