28

同じ水平ルールに 2 つの見出し h2 と h3 を配置したいのですが、1 つは左側、もう 1 つは右側です。その下に HR があり、この HR から同じ距離に配置する必要があります。

私はそれらを両方ともインラインにして、一方を右に、もう一方を左にフロートさせようとしました。そうすることに伴う問題は、h3 が垂直方向に h2 よりも小さいため、h2 の長さの半分を中心としていたことです。

h2 は hr に座っているようで、h3 は宙に浮いているように見えました。

私は彼らが両方とも時間に座っているようになりたかったのです。

h2{
display:inline;
float:left;
}
h3{
display:inline;
float:right;
}

状況を視覚的に説明することについて話していました。

4

7 に答える 7

39

2 つの見出しをタグでラップし、divその div タグでスタイルを使用する必要がありclear: bothます。例えば：

<div style="clear: both">
    <h2 style="float: left">Heading 1</h2>
    <h3 style="float: right">Heading 2</h3>
</div>
<hr />

タグのhr 後に がdivあると、両方のヘッダーの下に確実にプッシュされます。

またはそれに非常に似たもの。お役に立てれば。

于 2012-12-31T00:53:13.397 に答える
11

次のいずれかを実行するだけで済みます。

  • 両方にするinline（またはinline-block）
  • それらをfloat左または右に設定します

小さい見出しのheight、padding、またはプロパティを調整して、その位置を補正できるはずです。margin両方の見出しを同じに設定することをお勧めしますheight。

例については、このライブ jsFiddleを参照してください。

(jsFiddle のコード):

CSS

h2 {
  font-size: 50px;
}

h3 {
  font-size: 30px;
}

h2, h3 {
  width: 50%;
  height: 60px;
  margin: 0;
  padding: 0;
  display: inline;
}​

HTML

<h2>Big Heading</h2>
<h3>Small(er) Heading</h3>
<hr />​
于 2012-12-31T00:52:37.167 に答える
4

Css の vertical-align プロパティは、ここで役立ちます。

vertical-align: bottom;

小さいヘッダーに必要なものです:)

垂直整列

于 2012-12-31T00:54:26.093 に答える