Grille de fondation - empilée horizontalement


L'exemple suivant crée un système de grille de base qui est disposé horizontalement sur les PC et les tablettes, et empilé horizontalement sur les appareils plus petits comme les téléphones mobiles.

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<div class="row">
  <h2>Foundation 网格</h2>
  <p>两列网格堆叠实例。</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="medium-6 columns" style="background-color:yellow;">php中文网</div>
  <div class="medium-6 columns" style="background-color:pink;">php中文网</div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

NoteConseils : . small|medium Le nombre dans la classe |large-* spécifie le nombre de colonnes à couvrir. Ainsi, .small-1 s'étend sur 1 colonne, .small-4 s'étend sur 4 colonnes, .small-6 s'étend sur 6 colonnes (50 % de largeur), etc.
Note提示:  .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。

注意: 要保证数列加起来是 12 列!
<🎜>Remarque : Assurez-vous que la séquence de chiffres totalise jusqu'à 12 colonnes !