在一个部分中有一个div和一个h1,我如何在右上角浮动div,而不重叠标题的文本？
<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; }
我知道有很多类似的问题,但我找不到一个解决这个问题.
解决方法
如果您可以更改元素的顺序,浮动将会起作用.
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,1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1>
</section>
通过将div放在h1之前并将其浮动到右边,您将获得所需的效果.
