html - 如何将整个div移到右侧

如何将整个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:[phone]">{{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:[email protected]">{{myprofile?.Email}}</a>
                                        </div>
                                    </span>
                                </div>
                            </div>

                </div>
            </div>

最佳答案

给，请用这个

.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:[phone]">{{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:[email protected]">{{myprofile?.Email}}</a>
                                        </div>
                                    </span>
                                </div>
                            </div>

                </div>
            </div>

关于html - 如何将整个div移到右侧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53775327/