Question

我想使用.prof-cont类删除头像和我的div之间的空格，这两个版本都在div中maincontent，我尝试使用no-padding {1}}没有在我的类中工作仍然是相同的问题，我做错了我的视图和sass文件的代码。这是一个Ionic 3项目。

查看

<ion-content>
    <div class="profile">
    </div> 
    <div class="maincontent">
        <ion-avatar no-padding> 
            <img src="../assets/profile/profilesnap.png" class="dp"> 
        </ion-avatar> 
        <div class="prof-cont">
            <h2 text-center>John Doe</h2>
            <p text-center padding>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ipsa fuga cupiditate quos doloremque nulla ex a, rerum, eos nesciunt dolorum excepturi unde dolores nam.</p> 
        </div> 
        <!--Segments  -->
        <div padding>
            <ion-segment [(ngModel)]="profile">
                <ion-segment-button value="service">
                    Service
                </ion-segment-button>
                <ion-segment-button value="review">
                    Review
                </ion-segment-button>
            </ion-segment>
        </div>
        ....
<ion-content>

我的SASS文件

page-instraprofile {
    .scroll-content{
        // text-align: center;
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // text-align: center;
    }

    .profile{
        // background-image: url('../assets/bg@3x.png');

        background-repeat: no-repeat;
        background-size: cover;
        height: 30%;
    }

    .maincontent{
        background-color: aqua;
    }

    .dp{
        position: relative;
        left: 50%;
        transform: translate(-50%,-50%);
        // z-index: 10;
    }

    ion-avatar{
        img{}
    }

    .prof-cont{
        height: 100%;
        color: red;
        padding-top: 0 !important;
        background-color: yellow;

        h2{
            color: green;
        }
    }
}

Answer 1

这里的主要问题是transform: translate()。

它将图像的一半高度向顶部移动（ translate(-50%,-50%)中的第二个参数将元素沿 y 轴重新定位），尽管如此只在视觉上发生，这意味着它在技术上仍处于文档流程中的原始位置。（见下图）

为了保持文档的动态流动，并且由于图像包装器<ion-avatar no-padding>出现的目的是将图像保持在适当的位置，将其高度降低到大约图像高度的一半的值，它将仍然将图像放在现在的位置，尽管以下元素会向上移动。

即：

ion-avatar{
  height: 60px;        /*  adjust this value to control the distance to the text  */
}

如何在Ionic应用程序中删除此空间

1 个答案: