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>

如果不是要旋转容器，而是要堆叠图标，请放下书写模式并使按钮处于阻塞状态，使它们堆叠在一起。

将旋转的div对齐到右侧

1 个答案: