la page intelligente redimensionnement

Supposons que j'ai une page HTML avec trois blocs de largeur fixe (leur hauteur peut varier si c'est important), comme le montre l'image: alt text la page intelligente redimensionnement

Je voudrais qu'il se comporte comme indiqué sur la prochaine image: lorsque la largeur de l'écran du navigateur est réduite de sorte qu'il ne peut pas s'adapter à tous les trois blocs dans une ligne, le premier bloc tombe en panne. alt text

Est-il possible d'obtenir un tel comportement? De préférence avec CSS seulement, mais n'importe quelle solution de travail serait géniale.

Source

2010-03-08 Anton

Ceci est le comportement par défaut des navigateurs Web. – HotTester

@HotTester: Non ce n'est pas le cas. Si un utilisateur devait rendre son UA plus étroit, BLOCK 3 sauterait vers le bas, pas BLOCK 1. Using float: left agit comme un, last in (le code), le premier à sauter vers le bas. – anddoutoi

<div style="width: 100%;"> 
    <div style="display: inline-block; background-color: red; width: 200px;">DIV2</div> 
    <div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div> 
    <div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div> 
    <br style="clear: left;"> 
</div>

Celui-ci fonctionne. Vous mettez le bloc 1 en dernier et ne faites que le laisser flotter.

Source

2010-03-08 08:51:55 ZippyV

Merci, cela ressemble exactement à ce dont j'ai besoin. Met le premier bloc en bas par défaut dans Opera 10.10 tout en fonctionnant correctement dans tous les autres navigateurs, ce qui est tout à fait acceptable. – Anton

Nice, bien qu'il ne fonctionne que de manière cohérente pour le premier bloc et est difficilement compatible avec IE. – deceze

@deceze: Juste vérifié, dans IE tous les blocs sont en effet positionnés dans une seule ligne. Mais je suppose que cela fonctionne pour moi puisque les blocs 2 et 3 peuvent être enveloppés dans un seul DIV, ce qui les rend positionnés en ligne. – Anton

Utilisez divs avec float: left et les valeurs de largeur fixe

 <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">  
3 
    </div>   
     <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000"> 
     2  
    </div> 
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">  
     1 
    </div>

comme si ... Je suis conscient que la 1ère va aller à droite mais est le plus simple que je peux faire sans entrer dans javascript.

Source

2010-03-08 08:14:39 Sevki

Cela ferait passer le bloc 3 à la ligne suivante, pas le bloc 1 –

Re Revision: Ceci * ferait * tomber le bloc 1, mais pas de la manière demandée par l'OP. Le bloc 1 flotterait vers la droite, pas la gauche. – deceze

@deceze: Oui, j'avais pensé à utiliser 'float: right' moi-même et je l'ai rejeté pour cette raison. Comme vous, je ne vois pas vraiment de moyen évident de faire cela avec CSS seul, alors je suis malheureusement réduit à souligner les failles dans les réponses des autres. –

-1

Mettez tous ces trois blocs dans un div et réglez sa largeur à 100%, lorsque l'écran sera redimensionné les blocs seront disposés automatiquement.

Source

2010-03-08 08:16:11 Ravia

Il est quasiment impossible de laisser tomber le bloc sans aucune erreur de Javascript. Faire le plus à droite avec une goutte avec float: left est facile d'autre part.

Source

2010-03-08 08:17:04 deceze

+1 pour être la seule réponse donc-loin qui a attrapé le fait que le bloc 1 était censé laisser tomber –

Je souhaite juste que j'aie eu une meilleure réponse à fournir, mais ceci semble appeler beaucoup de Javascripting de coutume. – deceze

-1

<div style="width: 100%;"> 
    <div style="width: 50px; float left;">DIV1</div> 
    <div style="width: 50px; float left;">DIV2</div> 
    <div style="width: 50px; float left;">DIV3</div> 
    <br style="clear: left;" /> 
</div>

Source

2010-03-08 08:20:08

Cela ferait tomber le bloc 3 à la ligne suivante, pas le bloc 1 –

Répondre

Questions connexes