1

固定幅のヘッダー タグがあり、場合によっては 2 行、場合によっては 1 行のテキストが含まれます。これ。

マークアップを変更せずにこれを達成したいと考えています。 

<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>
<h1>This would be 2 lines of text</h1>
<h1>This is 1 line</h1>

CSS:

h1 {
float:left;
margin:5px;
padding:5px;
width:100px;
height:50px;
vertical-align:middle; /*obvi doesn't work because it's not an inline element */
text-align:center;
background:#336699;
color:#fff;
}

多分...自動高さに基づいて2つの異なるパディングプロパティを決定するCSSセレクターのように? 同様に、高さを auto に設定し、ヘッダー タグが 60px (2 行の場合) を超える場合は、パディングをthisにしますが、自動高さがそれより小さい場合は、パディングをthisにします。 ..

h1[height>60px] { padding:10px 0px; }
h1[height<60px] { padding:20px 0px; }

それが理にかなっていることを願っています。私はそれを書く方法がわからない...またはより良い方法はありますか？

例を参照してください。

http://jsfiddle.net/KcD3v/

どうもありがとう

4

1 に答える 1

2

あなたはそのようなことを試みることができます：

HTML

<div class="header">
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
    <h1>This would be 2 lines of text</h1>
    <h1>This is 1 line</h1>
</div>

CSS

.header {
    display: inline-table; /* IE8+, Chrome, FF3+, Opera7+ */
}

h1 {
    display: table-cell;
    margin:5px;
    padding:5px;
    width:100px;
    height:50px;
    vertical-align: middle;
    text-align:center;
    background:#336699;
    color:#fff;
}

このようにして、Webサイトのセマンティクスを壊すことなくテーブルを使用できます。テーブルのスタイリングの詳細については、 MDNを参照してください。display

ただし、通常、Webサイトのページタイトルを定義するために使用されるのはページごとに1つの 要素のみであり、次に要素の他のすべての組み合わせが使用されます。<h1><h*>

ブラウザ間の互換性が必要ない場合（たとえば、Chrome /Firefox拡張機能/Webアプリケーションを開発している場合）、新しいフレックスボックスでさえ興味深い代替手段になる可能性があります。

別の方法は、要素の高さに設定しvertical-alignてコードを変更することですが、この場合、テキストは1行に制限されます。line-height<h1>

于 2013-02-04T21:51:48.147 に答える