Добавление плавающего левого класса (Bootstrap 4) в div отрицает <a><img></a> ссылка

Question

Странная ситуация ... этот код приводит к изображению и соответствующему тексту НИЖЕ. Важно отметить, что на изображении можно нажимать правильно, обтекание текстом - это не то, что мне нужно (см. Ниже):

            <div class="col-md text-center " style="margin-top:15px;">
                <h3>Heading</h3>
            </div>

            <div class="col-md" style="margin-top:15px;">

                <div class="col-xs-5 nopad">
                    <a href="{link to external website}"><img src="images/picture.jpg"  style="max-height: 145px; margin-right: 15px; margin-bottom: 5px; "></a>

                </div>

                <div class="col nopad" style="width:100%;">
                    Lorem impsum, etc..........
                </div>

            </div>
        </div>
    </div>
</section>

Моя цель - обернуть текст справа и снизу фотографии и при этом иметьimg кликабельна. Когда я добавляю «float-left» к тегу before, изображение перестает быть кликабельным. Это код, который не работает:

            <div class="col-md" style="margin-top:15px;">

                //LINE BELOW CONTAINS FLOAT-LEFT
                <div class="col-xs-5 nopad float-left">
                    <a href="{link to external website}"><img src="images/picture.jpg"  style="max-height: 145px; margin-right: 15px; margin-bottom: 5px; "></a>

                </div>

                <div class="col nopad" style="width:100%;">
                    Lorem impsum, etc..........
                </div>

            </div>

Я искал без удачи. Я переставил код и не повезло. Наличие или отсутствие плавающего левого, очевидно, является источником проблемы.

Answer 1

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

<div id="container">
    <div id="floated">
      <a href="#"> <img src="https://dummyimage.com/600x400/000/fff"> </a>
  </div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
</div>

#container{
    width: 100%;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}

#floated img {
  width: 100%;
}

Я поместил px на ширину элементов, но он будет работать и с % тоже.

Надеюсь, это поможет

Счастливое кодирование