将 float-left 类（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”时，图像不再可点击。这是不起作用的代码：

            <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 放在元素宽度上，但它也适用于%..

希望对你有帮助

快乐编码