html - 使用 bootstrap 在文本周围定位图像

Question

做一个网站娱乐并尝试使用 Bootstrap 来做。我遇到了一个问题，试图将图像定位到网页右边缘附近某些文本的右侧。

使用 margin-top 和 margin-right 可以按我想要的方式移动图片，但使用 margin-bottom 似乎没有效果……这正是我需要的。知道我做错了什么吗？

这是我的代码笔的链接:https://codepen.io/gkunthara/pen/eRXmoP

相关代码:

HTML

<div class="second-content">

    <h2 class="second-header"> Bond Back Guarantee</h2>
    <p class="second-header-p text-left"> Moving homes in Sydney is 
stressful enough. With our end of lease cleaning service, getting your bond back has never been easier. Rest assured knowing that your real estate agent or landlord will accept your cleaning. If not, 
    just notify us within 72 hours and we'll gladly return to reclean any 
    problem areas - free of charge.</p>
    <img class="first-pic pull-right gap-right" src="firstpic.png">

</div>

CSS:

.second-content .first-pic {

width: 30%;
border: solid black;
margin-right: 100px;
margin-bottom: 50px; /* no effect /*

}

编辑:更新的 codepen 链接仅显示相关代码

Answer 1

根据您的codepen，您需要在文本之后添加图像，然后需要添加

float:left in this class second-header-p text-left。

.second-header-p.text-left{
   float:left;
}