inline-block sur la durée de
Je m'attendais à la durée de deux étiquettes dans l'exemple suivant pour afficher les uns à côté des autres, au lieu de cela, ils affichent l'une en dessous de l'autre. Si je définis la largeur de la classe de durée.droit de 49% ils affichent les uns à côté des autres. Je ne suis pas en mesure de comprendre pourquoi le droit de l'échelle est poussé vers le bas comme le droit span a quelques invisible padding/margin qui lui fait prendre plus de 50%. Je suis en train de le faire sans l'aide de tableaux html. Des idées?
<html>
<head>
<title>Test Page</title>
<style type='text/css'>
* {
margin: 0;
}
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
border:none;
}
div.header{
width:100%;
height:80px;
vertical-align:top;
}
span.left {
height:80px;
width:50%;
display:inline-block;
background-color:pink;
}
span.right {
vertical-align:top;
display:inline-block;
text-align:right;
height:80px;
width:50%;
background-color:red;
}
</style>
</head>
<body>
<div class='header'>
<span class='left'>Left Span 50% width</span>
<span class='right'>Right Span 50% width</span>
</div>
</body>
</html>
Merci pour l'explication. Le float:left fonctionne à merveille, avec les résultats escomptés dans FF 3.1. Malheureusement, dans IE6, le côté droit span rend 50% de la 50%, en effet en lui donnant une largeur de 25% de la fenêtre du navigateur. Réglage de la largeur à 100% atteint les résultats escomptés, mais les pauses dans FF 3.1 qui est dans le respect des standards de mode, et je le comprends. À la faire fonctionner à la fois dans FF et IE 6, sans avoir recours à des hacks ou à l'aide de plusieurs CSS feuilles a été un défi
- Pourquoi soutenir IE6? ie6nomore.com
Vous devez vous connecter pour publier un commentaire.
Essayez d'ajouter que, pour span.gauche
Il sera la cause de flotter à gauche (comme suggéré par la syntaxe).
Je ne suis pas un CSS à l'expert par tout moyen, de sorte s'il vous plaît ne prenez pas cela comme fait indiscutable, mais je trouve que quand quelque chose est flottant, il ne fait aucune différence à la position verticale de choses en dessous.
Si vous flottez la durée.droit vers la droite puis ajouter du texte au-dessous d'eux, vous devriez obtenir quelques résultats intéressants, pour arrêter ces "résultats intéressants", vous pouvez utiliser le bouton "clear: à gauche/à droite/à deux", qui sera la cause de la bloquer avec le clair de style pour être en vertu de quelque chose flottait à gauche/à droite/à la fois. W3Schools avoir une page sur ce bien trop.
Et bienvenue sur Stackoverflow.
C'est parce que inline inline-bloc d'espaces (dans votre cas, le saut de ligne) entre les éléments. Dans votre cas, la largeur combinée des éléments est de 50%+50%+espace > 100%.
Vous devez soit mettre les deux éléments sur la même ligne dans votre document HTML (sans espace)
Ou utiliser les commentaires en HTML
Moi je préfère le dernier.
Je n'aime pas ce hack, mais il semble faire le travail à la fois dans Firefox et IE6:
Note le
*width: 100%
qui semble répondre à IE6 l'exigence et est ignoré par Firefox.