27

divセクション内にとがある場合、ヘッダーのテキストと重ならないようにdivをh1右上隅にフロートさせるにはどうすればよいですか？

HTMLコードは次のとおりです。

<section>
  <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>
  <div><button>button</button></div>
</section>

このCSSコードの使用：

section { position: relative; }
h1  { display: inline; }
div {
    position: absolute;
    top: 0;
    right: 0;
}

このCSSコードの使用：

h1  { display: inline; }
div { float: right;    }

</ p>

同様の質問がたくさんあることは知っていますが、このケースを解決する質問は見つかりませんでした。

4

5 に答える 5

40

要素の順序を変更できる場合は、フローティングが機能します。

section {
  position: relative;
  width: 50%;
  border: 1px solid;
}
h1 {
  display: inline;
}
div {
  float: right;
}
<section>
  <div>
    <button>button</button>
  </div>

  <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>
</section>

div の前に配置し、にh1フローティングすることでright、目的の効果が得られます。

于 2012-11-12T16:31:35.790 に答える
11

ゴム製のアヒルによって解決された別の問題：

cssは正しいですが、HTML要素の順序が重要であることを覚えておく必要があります。divはヘッダーの前に配置する必要があります。http://jsfiddle.net/Fq2Na/1/ ここに画像の説明を入力してください

HTMLコードを変更して、ヘッダーの前にdivを付けます。

<section>
<div><button>button</button></div>
<h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>
</section>

そして、CSSをシンプルに保ちますdiv { float: right; }。

于 2012-11-12T16:31:28.247 に答える
1

との両方を使用して <Button> ラップdivを削除し、とを使用してそれらを指定します。このアプローチには、自分の位置を決めるためだけに別のアプローチを必要としないという利点があります。display:blockfloat:left<Button><h1>widthposition:relativeSectiondiv<Button>

html

<section>  
    <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>     
    <button>button</button>
</section>

css 

section {
    position: relative;
    width: 50%;
    border: 1px solid;
    float:left;
}
h1 {
    display: block;
    width:70%;
    float:left;
}
button
{
    position:relative;
    top:0;
    left:0;
    float:left;
}

</ p>

于 2012-11-12T16:40:04.187 に答える
0 
section {
    position: relative;
    width: 50%;
    border: 1px solid;
}
h1 {
    display: inline;
}
div {
    position: relative;
    float:right;
    top: 0;
    right: 0;

}
于 2012-11-12T16:34:42.920 に答える
0

これは私のために働いた：

h1 {
    display: inline;
    overflow: hidden;
}
div {
    position: relative;
    float: right;
}

これは、Stubbornellaによるメディアオブジェクトのアプローチに似ています。

編集：彼らが以下にコメントしているように、あなたはラップしようとしている要素（あなたの最初のフィドルの要素）の前にフロートしようとしている要素を配置する必要があります

于 2012-11-12T16:35:01.250 に答える