Question

Je m'attendais à ce que les deux balises span de l'exemple suivant s'affichent l'une à côté de l'autre, mais elles s'affichent l'une en dessous de l'autre.Si je règle la largeur de la classe span.right sur 49 %, ils s'affichent les uns à côté des autres.Je n'arrive pas à comprendre pourquoi la bonne travée est poussée vers le bas, comme si la bonne travée avait un rembourrage/marge invisible, ce qui fait que cela prend plus de 50 %.J'essaie de faire cela sans utiliser de tables 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 attendus dans FF 3.1.Malheureusement, dans IE6, la partie droite restitue 50 % des 50 %, ce qui lui donne en fait une largeur de 25 % de la fenêtre du navigateur.Définir sa largeur à 100 % permet d'obtenir les résultats souhaités mais interrompt FF 3.1 qui est en mode de conformité aux normes et je le comprends.Le faire fonctionner à la fois dans FF et IE 6, sans recourir à des hacks ou utiliser plusieurs feuilles CSS a été un défi

Était-ce utile?

La solution 

float: left;

Essayez d'ajouter cela à span.left

Cela le fera flotter vers la gauche (comme le suggère la syntaxe).

Je ne suis en aucun cas un expert CSS, alors ne prenez pas cela comme un fait incontestable, mais je trouve que lorsque quelque chose flotte, cela ne fait aucune différence dans la position verticale des choses en dessous.

Si vous faites flotter le span.right vers la droite puis ajoutez du texte en dessous, vous devriez obtenir des résultats intéressants, pour arrêter ces "résultats intéressants", vous pouvez utiliser "clear :gauche/droite/les deux", ce qui fera que le bloc avec le style clair sera sous tout ce qui flotte vers la gauche/droite/les deux. W3Écoles avoir également une page sur cette propriété.

Et bienvenue sur Stackoverflow.

Autres conseils

En effet, inline et inline-block incluent des 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 %+espaces > 100 %.

Vous devez soit mettre les deux éléments sur la même ligne dans votre document HTML (sans espace)

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

Ou utilisez les commentaires HTML

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

Je préfère moi-même ce dernier.

Je n'aime pas ce hack mais il semble faire l'affaire à la fois dans Firefox et IE6 :

span.right {
  vertical-align:top; 
  display:inline-block;
  text-align:right;
  height:80px;
  width:50%;
  *width:100%;
  background-color:red;
}

Noter la *width: 100% ce qui semble satisfaire aux exigences d'IE6 et est ignoré par Firefox.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top