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.
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; }
Il vous suffit d'ajouter clear:both
div
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>
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?
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.
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;
}