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设置为元素宽度，但是它也可以与%一起使用。.

希望有帮助

快乐编码

将左浮动类（Bootstrap 4）添加到div求反<a> <img> </a>链接

1 个答案: