html - 缩放时 div 与其他 div 重叠的问题

Question

缩放页面时，整个 Div 与其他 Div 重叠。 文本中的所有内容都是相互重叠的。我提供了 HTML 和 css 以及一些示例图像的外观。请帮助我，提前致谢 [ ]

 This is css code,While zooming the page whole Div is overlapping with eachother

.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: rgb(0, 195, 255); font-size: 20px
    }
}

.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;
}
 

.officeflex{
    margin: 10px;
    padding: 20px;
}

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: rgb(0, 195, 255); font-size: 20px;
        margin-left: -13px;
    }
}

 .Pad{

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

 body {
	margin: 0;
}

.outer-div-for-the-imgae-icon{position:relative; display:block; height:300px; width:300px;   }

.outer-div-for-the-imgae-icon img{height:300px; width:300px; object-fit:cover;}

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

This is HTML Code, While zooming the page whole Div is overlapping with eachother

<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">
                        <div class="outer-div-for-the-imgae-icon">
                            <app-image [imagesrc]="imagePath" style="width: 190px;max-height: 190px;clip-path: square(25px at center);"
                                class="d-none d-sm-block" alt="..."></app-image>
                            <i (click)="inputFile.click()" style="color : white;left: 180px; 
                            position: absolute; top: -5px; padding: 3px; background-color: rgb(0, 195, 255); 
                            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: rgb(25,25,112); font-size : 15px ">{{myprofile?.FirstName}}sandyuehfu
                                        {{myprofile?.LastName}}hsjdbfhag</b>
                                </span>
                            </div>

                            <div class="col-sm">

                                <span class="name">
                                    <p>{{myprofile?.Role}}cSS</p>
                                </span>
                            </div>

                            <div class="col-sm">

                                <span class="name">
                                    <p>{{myprofile?.Phone}}809974375t {{myprofile?.UserName}}psuneudhfjhg</p>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 float-right">
                        <div class="col-12 ">
                            <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}} wyhsieghrblufijerhbiktbui

                                </address>
                            </div>
                        </div>
                        <hr />
                        <div class="col-sm">
                            <div class="row1 office-address-heading">
                                <p class="Address">Communication Details</p>
                            </div>
                            <div class="d-flex align-items-center office-address-details ">
                                <div class="col-4">
                                    <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}}478596321012458
                                    </a>
                                </div>
                            <div class=" d-flex col-8 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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a283b3c3b3f3674393f2a3f3e3b1a362a3674393537" rel="noreferrer noopener nofollow">[email protected]</a>">{{myprofile?.Email}}<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16657778726f38657778726f56717b777f7a3875797b" rel="noreferrer noopener nofollow">[email protected]</a>
                                </a>
                            </div>
                        </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

Answer 1

对于媒体查询，您可以使用类似的东西来使其响应。请让我知道应用此后的结果。

@media only screen and (max-width: 600px) {
  .office-address-details {width:100%; display:block;}
  margin:20px auto; 
}