如何将整个div移到右侧

Question

如何将整个div元素移到右侧？目前，两个div：s并排出现。请查看我提供的图像，我希望它可以那样工作。

请帮助我。在此先感谢

<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">

                <img [src]="imagePath" style="width: 150px;max-height: 150px;clip-path: square(22px at center);" class="mr-3 d-none d-sm-block"
                    alt="...">

                <i (click)="inputFile.click()" *ngIf="isEditItems" style="color : white;left: 155px; 
                    position: absolute; top: 28px; 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-sm">
                                <div class="office-address-heading">
                                    <b>Office Address</b>
                                </div>
                                <div class="d-flex align-items-center">
                                    <i class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i>
                                    <address class="mb-0">
                                        {{myprofile?.OfficeAddress}}
                                    </address>
                                </div>
                            </div>
                            <hr />
                            <div class="col-sm">
                                <div class="office-address-heading">
                                    <b>Communication Details</b>
                                </div>
                                <div class="d-flex align-items-center office-address-details">
                                    <i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
                                    <div><a href="tel:1-562-867-5309">{{myprofile?.Phone}}</a></div>
                    
                                    <span class="d-flex align-items-center mail office-address-details">
                                        <i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
                                        <div>
                                            <a href="mailto:rafael.cepeda@lpl.com">{{myprofile?.Email}}</a>
                                        </div>
                                    </span>
                                </div>
                            </div>
                   
                </div>
            </div>

Answer 1

我们在这里，请使用此

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

<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">

                <img src="https://image.flaticon.com/icons/svg/147/147144.svg" style="width: 150px;max-height: 150px;clip-path: square(22px at center);" class="mr-3 d-none d-sm-block"
                    alt="...">

                <i (click)="inputFile.click()" *ngIf="isEditItems" style="color : white;left: 155px; 
                    position: absolute; top: 28px; 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-sm">
                                <div class="office-address-heading">
                                    <b>Office Address</b>
                                </div>
                                <div class="d-flex align-items-center">
                                    <i class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i>
                                    <address class="mb-0">
                                        {{myprofile?.OfficeAddress}}
                                    </address>
                                </div>
                            </div>
                            <hr />
                            <div class="col-sm">
                                <div class="office-address-heading">
                                    <b>Communication Details</b>
                                </div>
                                <div class="d-flex align-items-center office-address-details">
                                    <i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
                                    <div><a href="tel:1-562-867-5309">{{myprofile?.Phone}}</a></div>
                    
                                    <span class="d-flex align-items-center mail office-address-details">
                                        <i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
                                        <div>
                                            <a href="mailto:rafael.cepeda@lpl.com">{{myprofile?.Email}}</a>
                                        </div>
                                    </span>
                                </div>
                            </div>
                   
                </div>
            </div>