0

大きな div 内で左にフロートするように設定された可変高さの CSS ボックスがあります。次に、下のリンクに示すように、ボックスの左側にテキストが垂直に表示される (90 度回転した) タイトルを追加したいと思います (まだ画像を投稿できません)。

http://imageshack.us/photo/my-images/259/cssquestion.png

私はすべてを試しましたが、これまでのところ運がありません。「ラッパー」div内に2つのdiv(「タイトル」と「コンテンツ」)を作成する必要があると思いますが、タイトルdivで使用する位置設定はまったく間違っているようです。

これはCSSでまったく可能ですか、それともJSを使用して「タイトル」と「コンテンツ」の高さを動的に揃える必要がありますか?

ありがとう、ニコラス

4

3 に答える 3

0

http://jsfiddle.net/3r2Sk/1/

必要な主なコードは

-webkit-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-moz-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

配置に関するさまざまな問題に遭遇し、要素の回転は厄介な場合があります。位置と幅と高さのほとんどは、特定の状況に合わせて調整する必要があります。ゼロから始めて、変換コードをコピーするだけが最善です。上記のリンクを参考にしてください。

于 2013-01-30T20:53:46.470 に答える
0

transform:rotate(180deg);あなたのtitledivを置き、それを左に浮かせれば、うまくいくはずです。

http://www.w3schools.com/cssref/css3_pr_transform.asp

于 2013-01-30T20:37:04.933 に答える
0

あなたが抱えている問題は、要素を垂直に配置することに関連する一般的な問題ですが、270 度で使用transform: rotateしているため、問題はもう少し複雑です。要素を回転すると、ブラウザは最初は回転していないかのように描画し、次に回転したバージョンを表示するため、注意しないとプロパティが重なってしまうことがあります。

1 つの解決策は、要素のコンテンツと背景の描画を分割することです。

私は通常、この方法で垂直方向の配置を処理します。外側の要素を に設定しdisplay: table、内側の要素をdisplay: table-cellに設定します。このようにvertical-align: middleして、内側の要素のテキストを設定できます。

以下に例を示します: http://jsfiddle.net/MsBKQ/9/

すべてのブラウザで正しく表示されるようです: http://caniuse.com/#search=display%3A%20table

于 2013-01-30T21:11:24.250 に答える