兄弟のヘッダーが重複しないように右上にdivをfloatします

Question

divとh1をセクション内に配置すると、ヘッダーのテキストを重ならずに右上にdivを浮かせますか？

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> 

• Iは、親への絶対位置を試みたが、テキストが重なっている、使用http://jsfiddle.net/FnpS8/2/

  

このCSSコード：

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

• 私は右にdiv要素を浮動しようとしたが、それは、このCSSコードの使用http://jsfiddle.net/P6xCw/2/

  

、右上の隅に残っていない：

を

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

似たような疑問がたくさんあることは知っていますが、このケースを解決する方法が見つかりませんでした。

Answer 1

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

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>

h1前divを配置し、rightにそれを浮動することで、あなたは、所望の効果を得ます。

Answer 2

別problem solved by the rubber duck：

CSSは正しいですが、あなたはまだHTML elements order mattersがいることを覚えている：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> 

とシンプルなdiv { float: right; }にあなたのCSSを保つ：http://jsfiddle.net/Fq2Na/1/

は、ヘッダの前にdiv要素を持っているあなたのHTMLコードを変更し

。

Answer 3

section { 
    position: relative; 
    width: 50%; 
    border: 1px solid; 
} 
h1 { 
    display: inline; 
} 
div { 
    position: relative; 
    float:right; 
    top: 0; 
    right: 0; 

} 

Answer 4

これが私の仕事：

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

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

編集：彼らは以下のコメントとして、あなたは（あなたの最初のバイオリンの1）をラップするために起こっている要素の前に浮かぶように起こっている要素を配置する必要が

Answer 5

display:blockを使用して<Button>ラップDIVから取り除くとfloat:leftは<Button>と<h1>の両方であり、にはposition:relativeのを指定しています。このアプローチは、すべての答えのためのあなたの<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; 
}