Поплавок div в верхнем правом углу без перекрытия заголовка sibling

Имея 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/

    div overlapping text

Использование этого CSS-кода:

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

  • Я пробовал плавать div справа, но он не остается в верхнем правом углу, http://jsfiddle.net/P6xCw/2/

    div floated to the right

Использование этого CSS-кода:

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

Я знаю, что есть много подобных вопросов, но я не мог найти решение этого случая.

Ответы

Ответ 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>

Ответ 2

Еще одна проблема решенная резиновой уткой:

Css прав, но вы все равно должны помнить, что порядок элементов имеет значение: div должен пройти перед заголовком. http://jsfiddle.net/Fq2Na/1/ enter image description here

Измените свой 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; }.

Ответ 3

Избавьтесь от <Button> wrap div с помощью display:block и float:left в <Button> и <h1> и указав их width с помощью position:relative на ваш Section. Преимущество такого подхода состоит в том, что ему не нужен другой div, чтобы разместить ваш <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;
}

Ответ 4

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

}

Ответ 5

Это сработало для меня:

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

Это похоже на подход медиа-объекта, Stubbornella.

Изменить: как они комментируют ниже, вам нужно поместить элемент, который будет плавать, перед элементом, который будет обертываться (тот, что в вашей первой скрипке)