Изображения и текст, который не переносится без начальной загрузки?

Question

Для проекта веб-разработчика я пытаюсь отформатировать некоторые изображения и текст определенным образом с помощью html / css, что я смог сделать с помощью bootstrap, но я бы хотел сделать это без bootstrap.Я хотел бы использовать этот код в качестве шаблона для нескольких страниц, и хотя решение для начальной загрузки делает то, что я хотел бы, оно делает это только в одном конкретном случае и не будет работать так же, как в других.Вот как я хочу, чтобы это выглядело без использования начальной загрузки:--------------heading-------------- -----image----- -----text 1----- -----text 2-----Хитрость в том, что текст 1 иногда может быть достаточно длинным, чтобы обернуться вокруг нижней части изображения, и я не хочу, чтобы это произошло.Если текст 1 достаточно длинный, чтобы опускаться ниже нижней части изображения, я хочу, чтобы он функционировал так, как если бы он находился в своем собственном столбце.Я также хочу, чтобы текст 2 был ниже изображения и выровнялся до конца.Любая помощь будет очень признателен, спасибо

Answer 1

Все, что вам нужно сделать, это использовать макет строки / столбца, где заголовок занимает отдельную строку.Затем второй ряд будет разделен на два столбца - левый и правый.Крайний левый столбец будет содержать изображение и text 2, тогда как крайний левый столбец будет содержать text 1.Вам необходимо установить width из 50% для обоих столбцов, а float для них - left.

. Это можно увидеть ниже, где я добавил текст-заполнитель ифоны, которые помогут проиллюстрировать это.

.left,
.right {
  width: 50%;
  float: left;
}

.heading {
  background: lightsalmon;
  text-align: center;
  padding: 10px;
}

img {
  display: block;
  margin: 10px auto;
}

p {
  margin: 10px;
}

.left {
  background: yellow;
}

.right {
  background: cyan;
}

<div class="row heading">Heading</div>
<div class="row">
  <div class="left">
    <img src="http://placehold.it/100">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Dictumst vestibulum rhoncus est pellentesque elit.
      Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Vitae tortor condimentum lacinia quis. Luctus venenatis lectus magna fringilla urna porttitor rhoncus
      dolor.
    </p>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Dictumst vestibulum rhoncus est pellentesque elit.
      Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Vitae tortor condimentum lacinia quis. Luctus venenatis lectus magna fringilla urna porttitor rhoncus
      dolor. Mauris vitae ultricies leo integer malesuada. Sed arcu non odio euismod. Id nibh tortor id aliquet lectus proin nibh. Tortor at risus viverra adipiscing. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. In ornare
      quam viverra orci sagittis eu volutpat odio facilisis. Vel orci porta non pulvinar. Interdum velit euismod in pellentesque massa placerat. Euismod in pellentesque massa placerat duis ultricies lacus sed.</p>
  </div>
</div>