0

モバイル Safari でのみ表示されるページがあります。印刷物に合わせて特定の効果を達成しようとしています。私は本当に近づいてきましたが、これは最後の詳細です。

私のページには、次のような HTML マークアップがあります。

<section>
  <h2>Header</h2>

  <p>A long paragraph...</p>
</section>

CSS スタイリングは次のようになります。

section {
  padding-left: 200px;
  width: 700px;
}

h2 {
  float: left;
  width: 180px;
  margin-left: -200px;
}

結果は次のようになります。

Header          A long paragraph, blah blah blah...
                blah blah blah...

これは完璧です。ただし、ヘッダーの内容がもう少し長い場合は、次のようになります。

This is a       A long paragraph, blah blah blah...
longer header   blah blah blah...

私がやりたいのは、次のように、ヘッダーの最後の行で段落を開始することです。

This is a
longer header   A long paragraph, blah blah blah...
                blah blah blah...

JavaScript を使用してこれを解決できると思いますが、純粋に CSS を使用するか、マークアップの変更を最小限に抑えて、可能な限り邪魔にならない方法で修正したいと考えています。それを除けば、JavaScript ソリューションに関するアイデアはありますか? ありがとう！

4

1 に答える 1

0

これは、CSS のみを使用して実行できます。どちらもフローティングする必要はありません:

section {
  width: 700px;
}

section p {
  padding-left: 200px; 
  margin-top: -20px
}

section h2 {
  padding-right: 500px; 
  margin-bottom:0
}

HTML は同じままです。

于 2012-05-07T14:42:51.730 に答える