在右上角浮动div，不重叠同级元首 [英] Float a div in top right corner without overlapping sibling header

问题描述

在部分中有一个 div 和一个 h1 ，如何浮动右上角的div

$ b

 <$> 
 c $ c>< section> 
< h1>一些长长长标题，整行，1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6< / h1> 
< div>< button>按钮< / button>< / div> 
< / section> 
  
 
 
 
 
 
 
我尝试了相对于父项的绝对位置，文字重叠， 
 
 
 
  
 
 
 
 
 
 
使用此CSS代码：
  h1 {display：inline; } 
 div {float：right;} } 
  
 
 
 
 
很多类似的问题，但我找不到一个解决这种情况。
解决方案
如果你可以改变元素的顺序，浮动将工作。
 
 
 
 
 
 
  section {position：relative; width：50％; border：1px solid;} h1 {display：inline;} div {float：right;}  
 
 < section> < div> < button>按钮< / button> < / div> < h1>< / html>< / section>   p $ p> 
 
 
 
 
 
通过将 div   / strong>  h1 并将其浮动到右，即可得到所需的效果。
 
Having a div and a h1 inside a section, how do i float the div in the top right corner without overlapping the text of the header ?

The HTML code is the following:
<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/




Using this CSS code:
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/




Using this CSS code:
h1  { display: inline; }
div { float: right;    }
​

I know there is a lot of similar questions but I couldn't find one solving this case.
解决方案
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 div before the h1 and floating it to the right, you get the desired effect.

                        
这篇关于在右上角浮动div，不重叠同级元首的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！