/ / Imprimer deux colonnes en CSS avec Zurb Foundation 4 - css, printing, sass, zurb-foundation

Imprimer deux colonnes en CSS avec Zurb Foundation 4 - css, printing, sass, zurb-foundation

Mon code ressemble à ceci:

<link rel="stylesheet" href="css/foundation.css" media="all">
<div class="row">
<div class="large-12 columns">
<div class="large-6 column">
Lorem ipsum
</div>
<div class="large-6 column">
Lorem ipsum
</div>
</div>
</div>

dans le navigateur, on dirait qu'il est censé être Navigateur

Mais quand je veux l'imprimer - il agit comme une vue mobile / tablette entrer la description de l'image ici

Je dois avoir exactement deux colonnes visibles sur une page DIN A4 ainsi que dans le navigateur. Y a-t-il un moyen de le gérer? Ou même un meilleur cadre que Zurb.Foundation 4 pour ce problème?

Meilleures salutations.

Réponses:

0 pour la réponse № 1

Pour le mobile, vous devez ajouter des classes small-12 au conteneur (c'est-à-dire où vous avez large-12) et small-6 où vous avez large-6. Pour l'impression, je suggère d'ajouter par exemple une coutume print-6 classe qui a 50% de largeur et flotte en conséquence.


-1 pour la réponse № 2

Si jamais vous avez ce problème. Essayez Bootstrap car il n'existe pas encore de solution réelle dans Foundation. Au moins je n'en ai pas trouvé.

Bootstrap:

<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
Lorem ipsum
</div>
<div class="col-6 col-sm-6 col-lg-6">
Lorem ipsum
</div>
</div>