缩放对齐问题。

时间：2018-12-26 06:58:32

标签： html css bootstrap-4

缩放的对齐问题。当我将页面放大到200％时，对齐方式折叠了。.您可以在下面看到图像的样子。...     请帮我这个谢谢。enter image description here

这是css代码，缩放出现对齐问题。当我将页面放大到200％时，对齐方式折叠了。您可以在下面的图片中看到它的外观。...

   .flex-container{
        display: flex;
        overflow-x:auto;
        overflow-y: hidden;
    }
    .officeflex{
        margin-right: 31px; 
        width:366px;   
        max-height:225px;
    }
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }

    .d-flex.align-items-start.summary {
        display: flex;
        flex-direction: row;
      justify-content:space-between;
      margin:auto;
      max-width:100%;
      width:100%;
    }

    .align-items-center{
      .size{
        font-size: 13px;
       }
    }
    .office-address-heading{

        .Address{
            color:grey;
            font-size: 12px;
        }
    }

    .office-address-details{
        .mr-2{
            color:#0076C8; 
            font-size: 20px;
            padding-right: 0;
        }
    }

    .profile-details{
        margin-left:15px;
        padding:40px;

        .name{
            font-size:12px;
            line-height:22px;
            font-weight: 500;
        }

        .designation{
            font-size:12px;
            line-height:25px;
            font-weight: 400;
        }

        .phone{
            font-size:12px;
            font-weight: 100;
        }
    }
    .btn{
        font-size: 12px  !important;
        background-color: #0076C8;
        color: #FFFFFF;
        border-radius: 0px;
        font-family: 'Roboto Slab';
        font-size: 12px;
    }

    address{
        word-break: break-all;
        max-width: 100%;
    }

    .word-break-all{
        word-break: break-all;
    }
    .align-items-center{
      .size{
        font-size: 11px;
       }
    }
    .office-address-heading{

        .Address{
            color:grey;
            font-size: 11px;

        }
    }

    .office-address-details{
        .mr-2{
            color: #0076C8; font-size: 20px;
            margin-left: -13px;
        }
    }

     .Pad{

        padding: 60px 0px;
        margin-top: -161px;
     }

     body {
        margin: 0;
    }


    .outer-div-for-the-imgae-icon{position:unset; display:block;  width:100%; height:auto;   }

    .outer-div-for-the-imgae-icon img{max-height:300px; width:100%; max-width:300px; height:auto; position : relative;  object-fit:cover;}

    .outer-div-for-the-imgae-icon i{position:absolute; top:0; left:100%; font-size:40px;}


    body {
        margin: 0;
    }

    #over img {
        margin-left: auto;
        margin-right: auto;
        display: block;
        height: 200px;
    }

    .card1{
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 0.25rem;
    }

    .bg{
        background-color: white;
        min-height: 200px; 
        height:200px;
    }
    .im{
        height: 200px;
    }

    .button{
        background-color: white;
        color: grey;
        position: relative;
    right: 130px;

    }

    .buttonbg{
        background-color: white;
        color: #0076C8;
        border: 1px solid #0076C8;
    }

    .modal-body{
        background-color: black;
    }
    .h4{
        color: #003768;
    }
    .modal-title{
        color: #003768;
    }

这是HTML代码，缩放出现对齐问题。当我将页面放大到200％时，对齐方式折叠了。

    <div class="row ">

                <div class="col-12"  >
                    <div class="profile-summary">
                        <b>Profile summary</b>
                    </div>

                    <div class="col-12 col-12 p-0 ">
                        <div class="col-6 float-left bg" >
                            <div class="outer-div-for-the-imgae-icon">
                                <app-image [imagesrc]="imagePath" style="width : 38%; margin-top: 30px;"
                                    class="d-none d-sm-block" alt="..."></app-image>
                                <i (click)="openImageUploadModal(content)" style="color : white;left:37%; 
                                position: absolute; top: 24px; padding: 3px; background-color:#0076C8; 
                                border-radius: 50%;font-size: 12px;"
                                    class="fa fa-pencil fa-lg" aria-hidden="true"></i>
                            </div>

                            <div class="col-6 Pad float-right">
                                <div class="col-sm">

                                    <span class="name">
                                        <b style="color:#003768; font-size : 15px ">{{myprofile?.FirstName}}
                                            {{myprofile?.LastName}}</b>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div id="over" style="position:absolute; width:50px;  z-index:999; min-height: 200px; height:200px; left: 50%;">
                                <img class="im" src="/assets/images/MyProfile_Summary_1x.png">
                            </div>

                        <div style="padding-left: 100px;" class="col-6 float-right bg">
                            <div class="col-12" style="margin-top:20px;">
                                <div class="office-address-heading">
                                    <p class="Address">Office Address</p>
                                </div>
                                <div class="d-flex align-items-center">
                                    <!-- <i style="color:grey;" class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i> -->
                                    <address class="mb-0 size">
                                        {{myprofile?.OfficeAddress}}
                                    </address>
                                </div>
                            </div>
                            <hr />
                            <div class="col-12">
                                <div class="office-address-heading">
                                    <p class="Address">Communication Details</p>
                                </div>
                                <div class="d-flex align-items-center office-address-details ">
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style ="right: 14px;">
                                    <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 float-left">
                                        <i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
                                        <a style="color: black;" href="tel:1-562-867-5309">{{myprofile?.Phone}}
                                        </a>
                                    </div>
                                    <div class="d-flex1 col-xs-12 col-sm-12 col-md-8 col-lg-7 align-items-center office-address-details float-right ">
                                        <i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
                                        <a style="color: black;" href="mailto:rafael.cepeda@lpl.com">{{myprofile?.Email}}
                                        </a>
                                    </div>
                                </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

<!-- end snippet -->

0 个答案:

没有答案
相关问题
最新问题