0

テキストが入ったコンテナーと、その隣に別のコンテナーがあります (右にフロート)。この div は -90 度回転し、キャプション テキストが含まれている必要があります。

この div を回転させて、他の div と同じ高さにするにはどうすればよいですか?

写真のように。問題は、transform-origin: right top を使用できないことです。これは、「開始点」が真上ではなく可変であるためです。これは、テキストが短くなったり長くなったりする可能性があるためです。 ここに画像の説明を入力

4

1 に答える 1

1

transform-originただし、HTML の構造によっては、使用する必要がある場合があります。あなたの側からのコードがなければ、これはあなたが探しているものに最も近いかもしれません:

http://jsfiddle.net/2GA6H/

絶対配置を使用して、キャプション テキストを右上隅に一致する余白 (コンテナーに必要なパディングと一致) で配置し、transform-origin: top right.

このようなもの：

#caption {
    position: absolute;
    top: 0px;
    right: 32px;    
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: top right;
}

コンテナがrelative配置されている場所。

于 2013-10-31T13:53:08.893 に答える