éléments div avec l'affichage: inline sont cachés

Si je suis bon affichage: inline devrait afficher div sur la même ligne sans aucun saut de ligne. Ceci est ma page web où l'affichage: en ligne est tout simplement mon div invisible:éléments div avec l'affichage: inline sont cachés

<html> 
<head> 
    <style type="text/css"> 
    .body{ 
    max-width:3072px; 
    min-width:3072px; 
    margin:0px auto; 
    background:#293231; 

    } 

    .page1{ 
    background:url('Main.jpg') no-repeat; 
    width:1024px; 
    height:211px; 


    } 

    .page2{ 
    background:url('Page2.jpg') no-repeat; 
    width:1024px; 
    height:211px; 
    display:inline; 
    } 

    .page3{ 
    background:url('Page3.jpg') no-repeat; 
    width:1024px; 
    height:211px; 
    display:inline; 
    } 

    .wrapper{ 
    display:block; 
    width:100%; 
    height:auto; 
    } 

    </style> 
</head> 
<body class="body"> 

    <div class="wrapper"> 
    <div class="page1"> 

    </div> 
    <div class="page2"> 

    </div> 
    <div class="page3"> 

    </div> 
    </div> 

</body> 
</html>

Je peux voir avec divs class = page1, page2 mais et page3 sont invisibles.

Source

2010-06-26 TCM

Peut-être vous avez juste oublié de l'inclure ici, mais utiliser un [Doctype] appropriée (http://hsivonen.iki.fi/doctype/ #handling) pour déclencher le mode standard. –

Un élément non-bloc ne peut pas avoir une hauteur/largeur spécifiée comme ça (et sans contenu à l'intérieur, il va avoir rien à lui donner la taille) - au lieu que vous voulez inline-block, comme ceci:

display: inline-block;

You can see a full list of options for display here

Source

2010-06-26 12:25:29

à droite, mais inline-block ne fonctionne malheureusement pas sur tous les navigateurs, mais sur le plus. Pour autant que je sache, ça ne marche pas vraiment sur IE6 et FF2. Vous pouvez utiliser 'display: -moz-inline-block' pour le faire fonctionner sur FF2. Dans IE6 'display: inline-block' ne fonctionne que sur des éléments qui sont naturellement en ligne. Voir http://www.quirksmode.org/css/display.html – user375700

@snootles - Vous voulez un effet avancé ... vous avez besoin d'un navigateur avancé :) Si vous voulez IE6, utilisez un span, puis utilisez 'inline-block 'et ajoutez la balise mozilla aussi ... c'est un peu hacky, si vous voulez des effets post-date des navigateurs, c'est votre meilleure option. En remarque: êtes-vous sûr que le PO doit supporter ces navigateurs? Étant donné un choix, je ne voudrais pas ... et ne pas à moins que nécessaire. –

... ou dans la [spécification W3] (http://www.w3.org/TR/CSS2/visuren.html#propdef-display). –

Malheureusement, display: inline-blockis not supported by older versions of IE. Vous pouvez le faire en faisant flotter vos trois balises internes div à gauche, et en défaisant le flotteur sur l'élément contenant. Voici l'exemple complet (voir mes commentaires pour les changements pertinents):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style type="text/css"> 
      .body { max-width:3072px; min-width:3072px; margin:0px auto; background:#293231; } 

      .page1{ background:url('Main.jpg') no-repeat; } 

      .page2 { background:url('Page2.jpg') no-repeat; } 

      .page3{ background:url('Page3.jpg') no-repeat; } 

      /* These next two lines are my changes. */ 
      /* Float these guys left */.page1, .page2, .page3 { width:1024px; height:211px; float: left; } 
      /* Add overflow: hidden to "undo" the floating */.wrapper{ overflow: hidden; width:100%; height:auto; } 

     </style> 
    </head> 
    <body class="body"> 

     <div class="wrapper"> 
      <div class="page1"> 

      </div> 
      <div class="page2"> 

      </div> 
      <div class="page3"> 

      </div> 
     </div> 

    </body> 
</html>

Source

2010-06-26 12:37:08 wsanville

Merci wsanville – TCM

Dire que c'est * non * supporté est inexact, ce n'est pas * complètement * supporté, comme la plupart des choses dans IE. –

éléments div avec l'affichage: inline sont cachés

Répondre

Questions connexes