css - 在右上角 float 一个 div，不重叠兄弟标题

Question

在一个部分中有一个 div 和一个 h1，我如何在不与标题文本重叠的情况下将 div float 在右上角？

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

如果你可以改变元素的顺序， float 就可以了。

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 并将其 float 到右侧，您可以获得所需的效果。