在右上角浮动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

橡皮鸭解决的另一个问题是:

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; }.