web-dev-qa-db-fra.com

Faire flotter une div dans le coin supérieur droit sans chevaucher l'en-tête de la fratrie

Ayant une div et un h1 à l'intérieur d'une section, comment puis-je placer le div dans le coin supérieur droit sans recouvrir le texte de l'en-tête?

Le code HTML est le suivant:

<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>

En utilisant ce code CSS:

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

En utilisant ce code CSS:

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

Le plus grand centre commercial

Je sais qu'il y a beaucoup de questions similaires mais je n'ai pas pu en trouver une pour résoudre ce cas.

csshtml5
19
Maxime R.

Si vous pouvez changer l'ordre des éléments, le flottement fonctionnera.

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>

En plaçant le div before le h1 et en le faisant glisser dans le right, vous obtenez l'effet souhaité.

28
j08691

Un autre problème résolu par le canard en caoutchouc :

Le css est correct mais vous devez toujours vous rappeler que l'ordre HTML l'ordre des éléments est important : le div doit précéder l'en-tête http://jsfiddle.net/Fq2Na/1/ -enter image description here

Changez votre code HTML pour avoir le div avant l'en-tête:

<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>

Et gardez votre CSS au simple div { float: right; }.

9
Maxime R.

Débarrassez-vous de votre <Button> wrap div en utilisant display:block et float:left dans <Button> et <h1> et en spécifiant leur width avec un position:relative à votre Section. Cette approche a l’avantage de ne pas nécessiter une autre div uniquement pour positionner votre <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;
}

Le plus grand centre commercial

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

}
0
salih0vicX

Cela a fonctionné pour moi:

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

C'est semblable à l'approche de l'objet multimédia, par Stubbornella.

Edit: Comme ils le commentent ci-dessous, vous devez placer l’élément qui va flotter avant l’élément qui va s’envelopper (celui de votre premier violon)

0
Juanjo