1

私が取り組んでいる趣味のサイトでインフォ グラフィック/データ パネルを作成しようとしています。統計の合計の 1 つのテキストを垂直方向に回転させて表示したいのですが、テキストの折り返しをサポートしていますが、これを正しく配置するのは非常に困難です。

コードを貼り付ける代わりに、次の場所で進行中のページを表示できます。

http://www.footy-results.co.uk/

'148 TEAMS' のインフォ グラフィック パネルが機能しません。うまくいけば、問題は css ウィザードに明らかになります。

ヒントやヒントは大歓迎です。この問題の解決を手伝ってくれる人は、私が立ち上げたときにサイトにクレジットされます!

4

1 に答える 1

0

解決策はありますが、100% クリーンではありません。私の意見では、負のマージンを使用することは許可されていませんが、別の解決策が見つかりません。さらに、要素の高さと幅を定義する必要があります...

<span>回転した要素を別の要素に配置する必要があります<div>。次に、を<div>適切に配置すると、テキストがその周りに浮かんでいます。ここにコード：

HTML:

<div class="infoPanel">
    <span class="infoPanelVertical">
         <div class="spanwrapper">
             <span class="infoNumberVertical">148 TEAMS</span>
         </div> your text here...
    </span>
</div>

CSS:

.spanwrapper {
    float: left;
    height: 157px;
    position: relative;
    width: 48px;
}

.infoNumberVertical {
    background-color: #F5F5F5;
    border: 1px dotted #DDDDDD;
    color: #1A3C7B;
    float: left;
    font-size: 32px;
    font-weight: bold;
    margin-left: -56px;
    margin-top: 60px;
    transform: rotate(-90deg);
    width: 150px;
}

問題は、ラッピング<div>またはその中のスパンに高さと幅を指定する必要があることです。そうしないと、テキストがどこに浮かぶべきかわかりません。幅または高さを定義しない場合、テキストは大きな長方形である回転されたテキストをラップするだけです。CMS を使用している、またはコンテンツを動的に入力したい場合、これは悪い解決策です。しかし、幅と高さを js で定義することもできますが、それはちょっとハックなソリューションだと思います。

于 2013-06-07T06:54:19.230 に答える