css - 在右上角浮动一个 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;    }

​</p>

我知道有很多类似的问题，但我找不到解决此案的问题。

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

Answer 3

Get rid from your <Button> wrap div using display:block and float:left in both <Button> and <h1> and specifying their width with a position:relative to your Section. This approach has the advantage of not needing another div only to position your <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>

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 的媒体对象方法。

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