将旋转的 div 对齐到右侧

Question

我正在编写一个代码，我必须使我的按钮在图像的垂直和右侧，之前水平放置在图像的顶部

我的一段代码是：

<div style="display: flex; width:100%; height: 100%;">
<div class="thumbnailSelector" *ngIf="seriesList.length > 1" style="margin-right: 5px;">
    <div class="thumbnails list-group" style="height: 100%;">
        <a *ngFor="let series of seriesList; let i=index" [ngClass]="{'active': currentSeriesIndex === i}"
            class="list-group-item" oncontextmenu="return false" unselectable="on" onselectstart="return false;"
            onmousedown="return false;" (click)="showSeries(i)">
            <div thumbnail [imageData]="series.imageList[0]" class="csthumbnail" oncontextmenu="return false"
                unselectable="on" onselectstart="return false;" onmousedown="return false;">
            </div>
        </a>
    </div>
</div>

<!--container where image will be loaded-->
<div style=" width: 100%; height: 100%;">
    <div style="width: 80%; height: calc(100% - 60px);position:relative;display:inline-block;color:white;"
        oncontextmenu="return false" class='cornerstone-enabled-image' unselectable='on'
        onselectstart='return false;' onmousedown='return false;'>
        <div cornerstone
            style="width: 100%; height: 100%;top:0px;left:0px;position:absolute;outline:none;margin: 0 auto;"
            id="dicomImage">
        </div>
        {{viewPort.zoomValue | async}}
    </div>
    <!-- Toolbar in RS -->
    <div>
        <div class="btn-group" style="transform: rotateZ(90deg);">
            <div class="btn-group" *ngIf="enableViewerTools">

                <!-- Invert -->
                <button type="button" (click)="invertImage()" class="btn btn-sm"
                    style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
                    data-placement="bottom" title="Invert"><span class="fa fa-adjust"></span></button>
                <!-- Zoom -->
                <button type="  button" (click)="enableZoom()" class="btn btn-sm"
                    style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
                    data-placement="bottom" title="Zoom"><span class="fa fa-search"></span></button>
                <!-- Pan -->
                <button type="button" (click)="enablePan()" class="btn btn-sm" style="font-size: 24pt; color:white;"
                    data-container='body' data-toggle="tooltip" data-placement="bottom" title="Pan"><span
                        class="fa fa-arrows-alt"></span></button>
                <!-- Length measurement -->
                <button type="button" (click)="enableLength()" class="btn btn-sm"
                    style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
                    data-placement="bottom" title="Length"><span class="fa fa-arrows-alt-v"></span></button>
                <!-- Angle measurement -->
                <button type="button" (click)="enableAngle()" class="btn btn-sm"
                    style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
                    data-placement="bottom" title="Angle"><span class="fa fa-angle-left"></span></button>
                <!-- Pixel probe -->
                <button type="button" (click)="enableProbe()" class="btn btn-sm"
                    style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
                    data-placement="bottom" title="Pixel Probe"><span class="fa fa-dot-circle"></span></button>
                <!-- Elliptical ROI -->
                <button type="button" (click)="enableElliptical()" class="btn btn-sm"
                    style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
                    data-placement="bottom" title="Elliptical ROI"><span class="fa fa-circle"></span></button>
                <!-- Rectangle ROI -->
                <button type="button" (click)="enableRectangle()" class="btn btn-sm"
                    style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
                    data-placement="bottom" title="Rectangle ROI"><span class="fa fa-square"></span></button>
                <!-- Reset Image -->
                <button type="button" (click)="resetImage()" class="btn btn-sm"
                    style="font-size: 24pt; color:white;" data-container='body' data-toggle="tooltip"
                    data-placement="bottom" title="Reset Image"><span class="fa fa-window-restore"></span></button>
            </div>

        </div>
    </div>


</div>

现在看起来像： https://imgur.com/a/mxp0uPa

我希望我的图像看起来像： https://imgur.com/a/KM6UHh4

我正在使用 angular 所以请原谅我的数据绑定，以防我遗漏任何东西让我知道。

Answer 1

你可以看看writing-mode 。

flex和writing-mode基本示例：

 .button-sideway { writing-mode: vertical-rl; } /* flex layout used */.flex { display: flex; height: 100%; } figure { margin: auto; }.button-sideway { margin: 1em 1em 0 auto; } /* demo*/ img { max-height: 70vh; } body { margin: 0; padding: 0; height: 100vh; box-sizing: border-box }

 <div class="flex"> <figure> <img src="http://dummyimage.com/400"> <figcaption> <!-- description--> </figcaption> </figure> <nav class="button-sideway"> <button>btn</button> <button>btn</button> <button>btn</button> <button>btn</button> </nav> </div>

如果它不是关于旋转容器，而是堆叠图标，请放弃 wrtiting-mode 并使您的按钮阻塞，以便它们彼此堆叠。