Question

我需要将下面的图像向左对齐，作为我只留下我不明白的示例，因为它总是使我留有边距。

我的代码： HTML：

   <section class="container7">
        <div class="row">
        <div class="col-md-6 text-center w-75 p-3 w-responsive">
        <h1 class="h1-responsive font-weight-bold text-center my-5">Descarga nuestra app móvil</h1>

            <p class="text-justify w-responsive mx-auto mb-5">
                Descarga nuestra app y ten el servicio ¡Al alcance de tus manos!
            </p>
            <div class="row store text-center">
                <img width="30%" class="google d-flex justify-content-between align-items-center img-responsive " src="assets/images/google.png" />
                <img width="30%" class="apple d-flex justify-content-between align-items-center img-responsive" src="assets/images/apple.png" />
            </div>

        </div>
        <div class="col-md-6">
                <img width="75%" class="phone img-responsive" src="assets/images/phone.png" />
        </div>
        </div>
</section>

scss

.container7 {
    margin: 0;
    background: linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: relative;

    .phone{
     float: right; 
     margin-right: 0px;
     margin-bottom: 0px;
    }

}

错误

Answer 1

有两件事：首先，正如Niraj所说，必须在打开电话支架之前将容器7封闭。但是第二，您需要在代码中添加一些内容：

* {
    box-sizing: border-box;
    margin: 0;
}

.container7 {
    margin: 0;
    background: linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: relative;
}

.phone{
     float: right; 
     margin-right: 0px;
     margin-bottom: 0px;
}

请注意here，侧面没有白色或黑色边框（或您所说的空白：边距）。

编辑：由于它是SCSS，下面是一个有效的SCSS脚本：

* {
    box-sizing: border-box;
    margin: 0;

    .container7 {
        background: linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        position: relative;

        .phone{
             float: right; 
             margin-right: 0px;
             margin-bottom: 0px;
        }
    }
}

在右侧对齐图像

1 个答案: