Question

进行网站娱乐并尝试使用引导程序来执行此操作。我遇到了一个问题，试图将图像放在网页右边缘附近的某些文本的右侧。

使用margin-top和margin-right移动图片我想要的但是使用margin-bottom似乎没有效果......这就是我需要的。知道我做错了什么吗？

以下是我的codepen的链接：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：在此课程左侧第二个-pop-p text-left 。

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

Answer 2

我为您的代码添加了一些部分。 float:left and float:right有助于您完成任务。

<body>
    <div class="second-content">
        <div class="sec">
            <h2 class="second-header"> Bond Back Guarantee</h2>
        </div>
        <div class="sec">
            <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 ha
                s 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="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
        </div>
    </div>
</body>

CSS

.second-content {
    height: 750px;
    background-color: #fff;
    border-style: solid;
}
.second-content .second-header {
    font-size: 46px;
    color: #3498DB;
    margin-top: 100px;
    margin-left: 150px;
}
.second-content .second-header-p {
    width: 50%;
    font-size: 120%;
    margin-left: 150px;
    line-height: 40px;
    margin-top: 25px;
    float:left;
}
.second-content .first-pic {

    width: 30%;
    border: solid black;
    float:right;
}
.sec{
  width:100%
}

Answer 3

将pull-left课程提供给second-header-p。

.second-content {
    height: 750px;
    background-color: #fff;
    border-style: solid;
    padding: 20px;
}


.second-content .second-header {
    font-size: 46px;
    color: #3498DB;
}

.second-content .second-header-p {
    width: 65%;
    font-size: 120%;
    line-height: 40px;
}

.second-content .first-pic {

    width: 30%;
    border: solid black;

}

<head>
    <title> End of Lease Cleaning in Sydney</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    
  
    <div class="second-content">
        
        <h2 class="second-header"> Bond Back Guarantee</h2>
        <p class="second-header-p pull-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="https://thumb.ibb.co/iBF9Ea/firstpic.png" alt="firstpic" border="0">
    
    </div>
</body>

Answer 4

如果您使用bootstrap，请使用以下代码：

<html>
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>

</head>
<body>

<section class="second-content">

<div class="col-md-8">
<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>
</div>

<div class="col-md-4">
<img src="https://thumb.ibb.co/iBF9Ea/firstpic.png" />
</div>

</section>

</body>
</html>

使用引导程序在图像周围定位图像

4 个答案: