déplie au mode portrait, défaillir en mode paysage en utilisant CSS ne

je ce code:déplie au mode portrait, défaillir en mode paysage en utilisant CSS ne

<div class="wrapper"> 
<div class="left">content left</div> 
<div class="right">content right</div> 
</div>

Mon but est d'avoir les deux divs étendent à l'intérieur 100% pour couvrir toute la largeur lorsque l'iPhone est en mode portrait mais s'effondrer à 50% en mode paysage afin qu'ils se situent tous les deux dans la même ligne. Ceci est mon css:

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

.left, .right {float:left;width:auto;}

Cela ne fonctionnera pas. Comment faites-vous?

Source

2016-08-08 Cain Nuke

Vous pouvez utiliser css requête média pour elle. Consultez ce lien pour plus de détails 'https: // developer.mozilla.org/fr-fr/docs/Web/CSS/Media_Queries/Using_media_queries' –

Cela vous dérange-t-il d'en dire un peu plus? –

Le problème est que les divs sont totalement développés sur les deux modes ou totalement effondrés. J'ai seulement besoin qu'ils s'étendent en mode portrait afin que l'un vienne en dessous de l'autre occupant toute la largeur, alors qu'en paysage ils devraient couvrir 50% chacun et s'aligner dans la même ligne. –

Ce dont vous avez besoin est une requête multimédia pour l'orientation de l'écran. Voir MDN.

/* assume portrait mode; everything set to the default */ 
 
.wrapper {width:100%;height:auto;} 
 
.left, .right {width:auto;} 
 

 
/* in landscape mode however, display left and right side by side */ 
 
@media all and (orientation: landscape) { 
 
    .left, .right {float:left; width:50%;} 
 
}

<div class="wrapper"> 
 
<div class="left">content left</div> 
 
<div class="right">content right</div> 
 
</div>

Source

2016-08-08 06:54:44

déplie au mode portrait, défaillir en mode paysage en utilisant CSS ne

Répondre

Questions connexes