Позиционирование элементов внутри DIV

Question

У меня есть следующее HTML:

<div class="Section__item">
                <div class="Section__item__title">Title</div>
                <div>
                  <img
                    class="Section__item__image"
                    width="120px"
                    src="/static/images/test.jpeg"
                  >
                  <i class="Section__item__icon icon-right-nav-workflow"/>
                </div>
                <div class="Section__item__text">This is a descritption</div>
              </div>

И это мой стиль с использованием scss:

.Section {
 &__item{
      border: #EEF3F7 solid 1px;
      padding: 10px;
      height: 150px;
      margin-bottom: 15px;
      box-shadow: 3px 3px #EEF3F7;
      &:hover {
        background-color: #E3F4FE;
        cursor: pointer;
      }
      &__title {
        text-align: left;
        color: black;
        font-size: 16px;
        font-weight: 900;
      }
      &__image {
        padding-top: 5px;
        float: left;
      }
      &__icon {
        float: right;
        font-size: 40px;
      }
      &__text {
        float: left;
      }
     }
}

Результат следующий:

И мне нужно получить следующее:

Мне нужен текст длянаходиться под изображением и там, где вы видите «красную» линию справа, текст не может идти дальше, если текст больше, то оберните текст.

Также, если вы видите, правый значок должен быть расположен точно натот же самый верхний уровень, что и у изображения.

Любая подсказка?

Answer 1

Э-э ... не использовать поплавок?Или, скорее, используйте float только для одной вещи, которую вы хотите вырвать из нормального потока, а именно для значка.

PS: <i> не является тегом с автозакрытием, поэтому запись <i /> неверна, даже еслибраузеры, скорее всего, проигнорируют вашу ошибку.Кроме того, добавление padding к изображению кажется неправильным, в этом коде я переключился на margin-top.

.Section__item {
  display: inline-block; /* so it doesn't take full width of the snippet */
  border: #EEF3F7 solid 1px;
  padding: 10px;
  height: 150px;
  margin-bottom: 15px;
  box-shadow: 3px 3px #EEF3F7;
}
.Section__item:hover {
  background-color: #E3F4FE;
  cursor: pointer;
}
.Section__item__title {
  text-align: left;
  color: black;
  font-size: 16px;
  font-weight: 900;
}
.Section__item__image {
  margin-top: 5px;
  vertical-align: top;
}
.Section__item__icon {
  font-size: 40px;
  float: right;
}

<div class="Section__item">
  <div class="Section__item__title">Title</div>
  <div>
    <img class="Section__item__image" width="120" height="120">
    <i class="Section__item__icon icon-right-nav-workflow">Icon</i>
  </div>
  <div class="Section__item__text">This is a descritption</div>
</div>

Answer 2

Есть множество способов сделать это (flexbox, сетка, таблицы, абсолютное позиционирование).Олдскульный путь был бы четким исправлением, но на самом деле вы должны вообще избегать поплавков.Самое простое решение того, что у вас есть, это удалить ВСЕ поплавки;сделать div, который содержит изображение и значок position:relative;и установите значок на position:absolute; top:0; right:0;.

.Section__item {
  border: #EEF3F7 solid 1px;
  padding: 10px;
  min-height: 150px; /* changed to min-height so that it expands if there's loads of text */
  margin-bottom: 15px;
  box-shadow: 3px 3px #EEF3F7;
  width:400px;
}

.Section__item:hover {
  background-color: #E3F4FE;
  cursor: pointer;
}

.Section__item__title {
  color: black;
  font-size: 16px;
  font-weight: 900;
}

.Section__item__imagewrap {
  position: relative;
}

.Section__item__image {
  margin-top: 5px;
}

.Section__item__icon {
  font-size: 40px;
  line-height: 40px;
  position: absolute;
  top: 0;
  right: 0;
}

.Section__item__text {}

<div class="Section__item">
  <div class="Section__item__title">Title</div>
  <div class="Section__item__imagewrap">
    <img class="Section__item__image" width="120px" src="https://placeimg.com/320/240/any">
    <i class="Section__item__icon icon-right-nav-workflow">i</i>
  </div>
  <div class="Section__item__text">This is a description. If the text is long it will wrap and the section__item's height will increase to fit the content.</div>
</div>