Html 在右上角浮动一个div而不重叠同级标题

Float a div in top right corner without overlapping sibling header

提问by Maxime R.

Having a divand a h1inside a section, how do i float the div in the top right corner without overlapping the text of the header ?

在一个部分中有 adiv和 a h1，我如何在右上角浮动 div 而不与标题的文本重叠？

The HTML code is the following:

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 tried an absolute position relative to the parent but the text is overlapped, http://jsfiddle.net/FnpS8/2/

  

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

  

Using this CSS code:

使用此 CSS 代码：

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

• I tried floating the div to the right but it doesn't remain in the top right corner, http://jsfiddle.net/P6xCw/2/

  

• 我尝试将 div 向右浮动，但它没有留在右上角，http://jsfiddle.net/P6xCw/2/

  

Using this CSS code:

使用此 CSS 代码：

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

?

?

I know there is a lot of similar questions but I couldn't find one solving this case.

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

回答by j08691

If you can change the order of the elements, floating will work.

如果您可以更改元素的顺序，浮动将起作用。

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>

?By placing the divbeforethe h1and floating it to the right, you get the desired effect.

？通过将div以前的h1和它浮出right，你会得到预期的效果。

回答by Maxime R.

Another problem solved by the rubber duck:

橡皮鸭解决的另一个问题：

The css is right but you still have to remember that the HTML elements order matters: the div has to come before the header. http://jsfiddle.net/Fq2Na/1/

css 是正确的，但您仍然必须记住 HTML元素的顺序很重要：div 必须在标题之前。http://jsfiddle.net/Fq2Na/1/

Change your HTML code to have the div before the header:

更改您的 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>

And keep your CSS to the simple div { float: right; }.

并将您的 CSS 保持在简单的div { float: right; }.

回答by Bruno Vieira

Get rid from your <Button>wrap div using display:blockand float:leftin both <Button>and <h1>and specifying their widthwith a position:relativeto your Section. This approach has the advantage of not needing another divonly to position your <Button>

摆脱你的 <Button>包装 div 使用display:block和float:left在两者<Button>和<h1>和指定他们width与position:relative你的Section. 这种方法的优点是不需要另一个div来定位你的<Button>

html

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

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

?

?

回答by salih0vicX

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

}

回答by Juanjo

This worked for me:

这对我有用：

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

It's similar to the approach of the media object, by Stubbornella.

它类似于媒体对象的方法，由 Stubbornella。

Edit: As they comment below, you need to place the element that's going to float before the element that's going to wrap (the one in your first fiddle)

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