14

高さが可変のブロックがあり、高さが 100% で縦書き (下から上) の別のブロックを配置し、それを外側のブロックの左側に積み重ねます。CSS 変換でそれを達成する方法はありますが、JS で幅と高さを計算する必要はありませんか?

スケッチ

これは私がこれまでに得たものです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.block1 {
    border: 4px solid #888;
    height: 120px;
    width: 200px;
}
.block2 {
    height: 100%;
    border: 4px solid red;
}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: center center;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: center center;
}
</style>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there!</div>
            </td>
        </tr>
        </table>
    </div>
</body>
</html>

私のテスト

内側のブロックの計算された幅が、回転前のテキストの幅と同じであることがわかります。

アップデート：

これが私が最終的に得たいものの写真です：

ここに画像の説明を入力

これは、アイテムが左側に積み重ねられた水平方向のストライプで、垂直方向のヘッダー ブロックがあります。Stripe の高さは可変であるため、項目は適応し、ヘッダーのテキストは中央に配置されたままになる必要があります。

4

4 に答える 4

25

<table>あなたが探していたものを達成する最も簡単な方法であると思われたため、あなたは a のみを使用していたと思います. <table>別の理由がある場合は、前もってお詫び申し上げます。スタイルを移植して、代わりにa を使用できるはずです。

実際のコードを表示するには、 jsFiddle デモを参照してください。または、次のコードに進みます。

HTML

<section class="wrapper">
    <header><h1>Test</h1></header>
    <article>Text.</article><!--
    --><article>More text.</article><!--
    --><article>Photos of cats.</article><!--
    --><article>More photos of cats.</article>
</section>

CSS

.wrapper {
    margin:1em;
    position:relative;
    padding-left:2em; /* line-height of .wrapper div:first-child span */
    background:#fed;
}
.wrapper header {
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:2em; /* line-height of .wrapper div:first-child span */
    overflow:hidden;
    white-space:nowrap;
}
.wrapper header h1 {
    -moz-transform-origin:0 50%;
    -moz-transform:rotate(-90deg) translate(-50%, 50%);
    -webkit-transform-origin:0 50%;
    -webkit-transform:rotate(-90deg) translate(-50%, 50%);
    -o-transform-origin:0 50%;
    -o-transform:rotate(-90deg) translate(-50%, 50%);
    -ms-transform-origin:0 50%;
    -ms-transform:rotate(-90deg) translate(-50%, 50%);
    transform-origin:0 50%;
    transform:rotate(-90deg) translate(-50%, 50%);
    position:absolute;
    top:0;
    bottom:0;
    height:2em; /* line-height of .wrapper div:first-child span */
    margin:auto;
    font-weight:bold;
    font-size:1em;
    line-height:2em; /* Copy to other locations */
}
.wrapper article {
    display:inline-block;
    width:25%;
    padding:1em 1em 1em 0;
    vertical-align:middle;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

使い方

はの<header>高さに設定され、 ( の値 ) に設定され.wrapperています。次に、を縦に並べます ( [も] から)。を垂直方向に揃えたら、左側の中央で反時計回りに 90 度回転します。再び見えるようにするために、垂直方向 (画面に水平方向に引き戻すため) および水平方向 (垂直方向に整列させるため) に変換されます。はい、言い回しは正しいです。[-]90 度回転すると、すべてが混乱します ;)width2emline-height<h1><h1>top:0;bottom:0;height:2em;margin:auto;2emline-height<h1><h1>50%-50%

落とし穴

  • では、静的な「高さ」のみがサポートされてい<h1>ます。この場合、1 回線のみがサポートされます。
  • ラッピングは機能しません (この例では実際に無効にしていますheight) .wrapper。
于 2012-06-06T04:35:04.653 に答える
0

私はこれを思いついた：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
.block2 {
    width: 100%;
    border: 4px solid red;
}
.msg {
    display: inline-block;
    white-space: nowrap;
    font-family: Verdana;
    font-size: 14pt;
}
.block1 {
    border: 4px solid #888;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: right top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: right top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: right top;
    text-align:center;
}
</style>
</head>
<body>
    <div class="block1">
        <table class="block2">
        <tr>
            <td>
                <div class="msg">Hi there!</div>
            </td>
        </tr>
        </table>
    </div>
<style>
.block1{
width:500px;
margin-left:-500px;
}
</style>
</body>
</html>
  • 変換を外側の要素に切り替え、
  • 次に、width属性を使用して、ページの下部の高さを定義しました（これで遊ぶときは、実際にはそこでの高さで遊んでいます）。
  • 回転後に表示される空の左側のスペースについては、可変幅（高さ）を負のマージンとして使用しました。

あなたはここでそれを見ることができます：http：//pastehtml.com/view/c0hl7zxci.html

于 2012-06-05T17:08:28.000 に答える
0

変換スタイルをより徹底的に調べた後、それはそうではありません。あなたはアウターの正確な高さを知る必要があるでしょうdiv。

于 2012-06-02T01:06:54.347 に答える
0

私が思いつくことができる最高のものはこれです：http：//jsfiddle.net/EwgtT/

block1の可変の高さは問題になりませんが、メッセージの可変の高さは問題になります。常に一番下から始まります。

編集： 更新されたため、FFおよびIEで正常に機能します：http：//jsfiddle.net/EwgtT/2/

于 2012-06-05T17:04:00.237 に答える