在右上角浮动div而不重叠兄弟标题

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>

• 我尝试了相对于父级的绝对位置，但文本重叠，http://jsfiddle.net/FnpS8/2/

  

使用此CSS代码：

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

• 我尝试将div浮动到右边，但它不会保留在右上角，http://jsfiddle.net/P6xCw/2/

  

使用此CSS代码：

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>

将div 放在之前h1并将其浮动到right，即可获得所需效果。

Answer 2

另一个problem solved by the rubber duck：

css是对的，但你仍然需要记住HTML elements order matters：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; }。

Answer 3

在<Button>和display:block中使用float:left和<Button>摆脱<h1>换行div并使用width指定position:relative {1}} Section。这种方法的优点是不需要另一个div来定位<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;
}

Answer 4

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

}

Answer 5

这对我有用：

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

这与Stubbornella的媒体对象的方法相似。

编辑：正如他们在下面评论的那样，你需要在要包装的元素（你的第一个小提琴）中放置要浮动的元素