Можно ли решить вопрос со скрытием border-left за картинкой?

Question

Border-left скрывается за картинкой из-за float у картинки. Привела скрин проблемы https://skr.sh/sFLlyO4TNlw

Можно ли сделать так, чтобы бордер был всегда рядом с текстом https://skr.sh/sFL4kcYUANs ?

Добавлять блок со свойством clear:both перед текстом не вариант, текст должен обтекать картинку.

.img{
  width:300px;
  height: 300px;
  float:left;
  margin:0 10px 10px 0;
}
img{
   width:100%;
  height: 100%;
}
p{
  font-size:20px;
}
p span{
  display:block;
  padding-left: 30px;
  border-left:5px solid red;
}

<div>
  <div class="img">
  <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1612732507_112-p-fon-sirenevii-goluboi-122.jpg">
</div>
  <p>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века
    В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но 
  </p>
    <p>
      <span>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала 
        гнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с обраXVI века
      </span>
  </p>
</div>

Answer 1

Чтобы рамка не уезжала под блок с float: left, нужно текстовым блокам тоже задать float: right и указать ширину width. Для адаптивности, если у блока с картинкой так и останется фиксированный размер, можно задать ширину блокам с текстом через формулу width: calc(100% - 310px):

.img{
  width:300px;
  height: 300px;
  float:left;
  margin:0 10px 10px 0;
}
img{
   width:100%;
  height: 100%;
}
p{
  float: right;
  width: calc(100% - 310px);
  font-size:20px;
}
p span{
  display:block;
  padding-left: 30px;
  border-left:5px solid red;
}

<div>
  <div class="img">
  <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1612732507_112-p-fon-sirenevii-goluboi-122.jpg">
</div>
  <p>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века
    В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но 
  </p>
    <p>
      <span>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала 
        гнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с обраXVI века
      </span>
  </p>
</div>

Answer 2

Как вариант с js

const img = document.querySelector('.img'),
      box = document.querySelector('.box');
let coordImg = img.getBoundingClientRect(),
    coordBox = box.getBoundingClientRect();


let setH = coordImg.bottom - coordBox.top;

if (setH > 0) {
document.querySelector('.border').style.height = setH+'px';
}

.img{
  width:300px;
  height: 300px;
  float:left;
  margin:0 10px 10px 0;
}
img{
  width:100%;
  height: 100%;
  border-bottom:5px solid white;
}
p{
  font-size:20px;
}
p span{
  display:block;
  padding-left: 30px;
  border-left:5px solid red;
}
.border {
  border-left:5px solid red;
  height:50px;
  display: inline-block;
  float:left;
}

<div>
  <div class="img">
  <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1612732507_112-p-fon-sirenevii-goluboi-122.jpg">
</div>
  <p>
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века
    В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
  </p>
    <p class="box">
    <span class="border"></span>
      <span>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала 
        гнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с обраXVI века
      </span>
  </p>
</div>

БЛОГ НА HUSL

Можно ли решить вопрос со скрытием border-left за картинкой?

Ответы (2 шт):