web-dev-qa-db-fra.com

Aligner à gauche et à droite sur la même ligne

Je veux créer un div qui a un en-tête contenant deux morceaux de texte. Un morceau de texte sera aligné à gauche et un à droite. L'en-tête aura un fond gris qui se développera avec le texte:

<div id="expand-box">
   <div id="expand-box-header">
      <span style="float: left;">Top left header</span> 
      <span style="float: right;">Top right header</span>
   </div>
   Lorem ipsum dorem nori seota ostiy
</div>

CSS:

#expand-box
{
    width: 100%;
    padding: 0;
    border: 2px solid #BBB;
    margin: 7px 0 0 0;
}

#expand-box-header
{
    background-color: #BBB;
    margin: 0;
    color: #FFF;
    padding: 0 0 3px 2px;
}

Bien que cela fonctionne, les deux variables spans flottent au-dessus du fond gris expand-box-header et le texte Lorem Ipsum flotte plus haut qu'il ne le devrait.

htmlcsscss3
23
John 'Mark' Smith

La raison pour laquelle votre code ne fonctionnait pas, c'est parce que les div flottantes n'affectent pas la taille de l'élément environnant. Le problème que vous rencontrez avec inline-block sur votre flottant gauche est que vous perdez l'un de vos en-têtes lorsque l'écran est réduit. J'ai réduit la taille de l'écran sur le JSfiddle Mehmet Eren Yener fourni et le bon en-tête disparaît. Si vos en-têtes sont longs et que l'écran est petit, le bon en-tête disparaîtra. 

Je pense que la meilleure approche serait d'utiliser une classe clearfix ou d'utiliser la balise overflow. Il y a aussi la méthode Empty Div - mais je ne suis pas vraiment fan de celui-là. Si vous utilisez l'une de ces méthodes à la place, l'en-tête de gauche s'empilera au-dessus de l'en-tête de droite quand elles seront trop proches.

Voici des exemples d'utilisation de Clearfix et Overflow:

Clearfix: http://jsfiddle.net/ATP33/

HTML:

 <div id="expand-box">
 <div id="expand-box-header" class="clearfix">
  <span style="float: left;">Top left header</span> 
  <span style="float: right;">Top right header</span>
 </div>
 <div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
 </div>

CSS:

#expand-box {
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;}

#expand-box-header {
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;}

#expand_box_sub_header { clear: both; }

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}  
.clearfix{ display: inline-block;}  
html[xmlns] .clearfix { display: block;}  
* html .clearfix{ height: 1%;}  
.clearfix {display: block}

Débordement: http://jsfiddle.net/RL8ta/

HTML:

<div id="expand-box">
<div id="expand-box-header">
  <span style="float: left;">Top left header</span> 
  <span style="float: right;">Top right header</span>
</div>
<div id="expand_box_sub_header">Lorem ipsum dorem nori seota ostiy</div>
</div>

CSS:

#expand-box {
width: 100%;
padding: 0;
border: 2px solid #BBB;
margin: 7px 0 0 0;}

#expand-box-header {
background-color: #BBB;
margin: 0;
color: #FFF;
padding: 0 0 3px 2px;
overflow: auto;}

#expand_box_sub_header { clear: both; }
10
Pearl

Il vous suffit d'ajouter clear:bothdiv

Ou

Il suffit de créer une classe clear with property

.clear{
    clear:both;
}

<div id="expand-box-header">
      <span style="float: left;">Top left header</span> 
      <span style="float: right;">Top right header</span>
      <div style="clear:both;"></div> <!-- Here we go --> OR <div class="clear"></div>
</div>

Démo

14
Dhaval Marthak

Vous pouvez faire pour le côté gauche

display:inline-block;

Voici le JSFIDDLE http://jsfiddle.net/erenyener/MBwJq/

Mais tout d’abord, vous avez du code css en ligne, c’est une bonne pratique de ne pas écrire du code css en ligne du tout.

clearfix est une ancienne technologie qui fonctionne, mais le blocage en ligne consiste à cesser d’utiliser clearfix

Voici le lien: Qu'est-ce qu'un clearfix?

3
Mehmet Eren Yener

Essayez d’ajouter overflow: hidden; aux styles de l’élément #expand-box-header. Cela effacera automatiquement les éléments span flottés à l'intérieur sans avoir besoin de balises HTML supplémentaires.

1
Arnelle Balane

Pour contenir des floats, utilisez micro-clearfix .

Donc, votre css pour le conteneur ressemblera à ceci:

#expand-box:before, #expand-box:after {
    contents: "";
    display: table;
}
#expand-box:after {
    clear: both;
}
0
josh_bailey4