Блог

У меня есть изображение в контейнере. Справа от изображения у меня есть текст, который не будет переноситься под изображение.

Есть еще один текст, который я хочу поместить, который всегда должен совпадать с левым краем изображения. Прямо сейчас любой текст, который я помещаю, просто продолжается под текстом, который находится справа. Что я должен сделать, чтобы перенести текст на левый край контейнера.

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

Снимок экрана проблемы

Я хочу, чтобы «Education:» было выровнено по нижнему левому краю изображения, в то время как название: YOLO и обозначение остаются справа от изображения

Col-sm-19 имеет отступ 16 пикселей как слева, так и справа

PS Я ничего не знаю о CSS или HTML, я создаю веб-сайт с использованием Jekyll и просто пытаюсь поиграть с кодом.

Ваш вопрос не на 100% ясен. Но чтобы текст начинался под изображением, просто удалите атрибут float: left; from style img тега.

РЕДАКТИРОВАТЬ после комментария / уточнения:

Добавьте clear: left в абзац, который вы хотите переместить под изображение:

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

(и удалить это margin-left из него)

Удалите float-left из img и добавьте display:block в стиле img

которые создают отдельный блок для img, и ваш текст всегда будет отображаться после img слева