communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Propriétés multi-colonnes CSS3

La nouvelle mise en page multicolonne en CSS3 est une extension puissante du mode de mise en page en bloc dans les pages Web HTML traditionnelles. Cette nouvelle syntaxe permet aux développeurs WEB d'afficher facilement du texte dans plusieurs colonnes. Nous savons que lorsqu'une ligne de texte est trop longue, il sera plus difficile pour les lecteurs de lire, et ils risquent de lire la mauvaise ligne ou de lire en série, les yeux des gens se déplacent d'une extrémité du texte à l'autre, puis à l'autre ; début de la ligne suivante. Si le globe oculaire Si le mouvement est trop important, leur attention sera réduite et ils seront facilement incapables de lire. Par conséquent, afin d’utiliser les affichages sur grand écran avec une efficacité maximale, la conception de la page doit limiter la largeur du texte et permettre au texte d’être présenté sur plusieurs colonnes, tout comme la mise en page des informations dans un journal.

<<> Attribut Décrit

Column-Count élément spécifié qui doit être divisé en nombre de colonnes.

column-fill Spécifiez comment remplir la colonne

column-gap Spécifiez l'espace entre les colonnes

column-rule All column-rule- * Abréviation de l'attribut

column-rule-color Spécifie la couleur de la bordure entre deux colonnes

column-rule-style Spécifie le style de la bordure entre deux colonnes

column -rule- width Spécifiez l'épaisseur de la bordure entre deux colonnes

column-span Spécifiez le nombre de colonnes que l'élément doit s'étendre

column-width Spécifiez la largeur de la colonne

colonnes Définir la largeur des colonnes et les colonnes - Abréviation de count

Parfaitement compatible avec les navigateurs de disposition en colonnes

Pour certains navigateurs qui ne prennent pas en charge la disposition multi-colonnes fonctionnalités, telles que IE9/IE8, ces attributs sont tous ignorés afin que la mise en page se comporte comme une mise en page monolithique traditionnelle.

Afin de garantir une compatibilité maximale avec le navigateur, lorsque nous utilisons des attributs de mise en page multi-colonnes, il est préférable d'ajouter des préfixes de moteur de navigateur. Les plus basiques en incluent trois : -webkit- de Google Chrome, Firefox -moz- in. le navigateur, -ms- dans le navigateur IE, et enfin, n'oubliez pas de l'écrire sans le préfixe. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
          body{font:14px/1.5 georgia,serif,sans-serif;}
              p{margin:0;padding:5px 10px;background:#eee;}
              h1{margin:10px 0;font-size:16px;}
              .test{
                     width:628px;
                     border:10px solid #000;
                     -moz-columns:200px 3;
                     -webkit-columns:200px 3;
                     columns:200px 3;
              }
              .test2{
                     border:10px solid #000;
                     -moz-columns:200px;
                     -webkit-columns:200px;
                     columns:200px;
              }
      
       </style>
  </head>
  <body>
    <h1>列数及列宽固定:</h1>
       <div>
              <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
              <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
       </div>
       <h1>列宽固定，根据容器宽度液态分布列数:</h1>
       <div>
              <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
              <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
       </div>
  </body> 
</html>


colonne-compte :

<integer> l'objet Count
tel que : -webkit-column-count:3;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
           .columns{width:300px;}
           .columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
          .columns .column_count{
             -webkit-column-count:3;
             -moz-column-count:3;
          }
      </style>
  </head>
  <body>
    <div>columns-count</div>
    <div>
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
      根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
      预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。   
    </div>
     </body> 
</html>


column -gap :

<length> normal définit ou récupère l'espace entre les colonnes de l'objet
Par exemple : column-gap:normal;column-gap : 40px; 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
           .columns{width:300px;}
              .columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
              .columns .column_gap{
                 -webkit-column-count:2;
                 -moz-column-count:2;
                 -webkit-column-gap:40px;
                 -moz-column-gap:40px;
              }
      </style>
  </head>
  <body>
    <div>columns-gap</div>
    <div>
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。   
    </div>
</body> 
</html>


règle de colonne :

[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ] Définit ou récupère la bordure entre les colonnes d'un objet. Propriétés composites. Équivalent à l'attribut border
tel que : column-rule:10px solid #090;

l'attributcolumn-rule-width précise l'épaisseur de la bordure des deux colonnes :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style>
         .newspaper
         {
              column-count:3;
              column-gap:40px;
              column-rule-style:outset;
              column-rule-width:10px;
 
              /* Firefox */
              -moz-column-count:3;
              -moz-column-gap:40px;
              -moz-column-rule-style:outset;
              -moz-column-rule-width:10px;
 
              /* Safari and Chrome */
              -webkit-column-count:3;
              -webkit-column-gap:40px;
              -webkit-column-rule-style:outset;
              -webkit-column-rule-width:3px;
         }
    </style>
  </head>
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
      根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
      预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。    
    </div>
  </body> 
</html>

<🎜 L'attribut >column-rule-style spécifie le style de bordure entre les colonnes : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style>
         .newspaper
         {
              column-count:3;
              column-gap:40px;
              column-rule-style:dashed;
 
              /* Firefox */
              -moz-column-count:3;
              -moz-column-gap:40px;
              -moz-column-rule-style:dashed;
 
              /* Safari and Chrome */
              -webkit-column-count:3;
              -webkit-column-gap:40px;
              -webkit-column-rule-style:dashed;
         }
    
     </style>
  </head>
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。    
    </div>

  </body> 
 
</html>

L'attribut column-rule-color spécifie la couleur de bordure de deux colonnes : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
   .newspaper
        {
            column-count:3;
            column-gap:40px;
            column-rule-style:outset;
            column-rule-color:blue;
            /* Firefox */
            -moz-column-count:3;
            -moz-column-gap:40px;
            -moz-column-rule-style:outset;
            -moz-column-rule-color:blue;
            /* Safari and Chrome */
            -webkit-column-count:3;
            -webkit-column-gap:40px;
            -webkit-column-rule-style:outset;
            -webkit-column-rule-color:blue;
        }
</style>
  </head> 
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
    </div>
  </body>  
</html>

Spécifie combien colonnes que l'élément s'étend 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
   .newspaper
        {
        column-count:4;
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        }
      h3
        {
        column-span:all;
        -webkit-column-span:all; /* Safari and Chrome */
        }
</style>
  </head> 
  <body>
    <h3>最新军事消息</h3>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
    </div>
  </body>  
</html>

Spécifie la largeur de la colonne

L'attribut column-width spécifie la largeur de la colonne. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
      body{font:14px/1.5 georgia,serif,sans-serif;}
        p{margin:0;padding:5px 10px;background:#eee;}
        h1{margin:10px 0;font-size:16px;}
        .test{
        width:628px;
        border:10px solid #000;
        -moz-column-width:200px;
        -moz-column-count:3;
        -webkit-column-width:200px;
        -webkit-column-count:3;
        column-width:200px;
        column-count:3;
        }
        .test2{
        border:10px solid #000;
        -moz-column-width:200px;
        -webkit-column-width:200px;
        column-width:200px;
        }
        .test3{
        border:10px solid #000;
        -moz-column-count:5;
        -webkit-column-count:5;
        column-count:5;
        }
</style>
</head> 
<body>
      <h1>列数及列宽固定:</h1>
        <div class="test">
        <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
        <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
        </div>
        <h1>列宽固定，根据容器宽度液态分布列数:</h1>
        <div class="test2">
        <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
        <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
        </div>
        <h1>列数固定，根据容器宽度液态分布列宽:</h1>
        <div class="test3">
        <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
        <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
        </div>
</body>  
</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{font:14px/1.5 georgia,serif,sans-serif;} p{margin:0;padding:5px 10px;background:#eee;} h1{margin:10px 0;font-size:16px;} .test{ width:628px; border:10px solid #000; -moz-column-width:200px; -moz-column-count:3; -webkit-column-width:200px; -webkit-column-count:3; column-width:200px; column-count:3; } .test2{ border:10px solid #000; -moz-column-width:200px; -webkit-column-width:200px; column-width:200px; } .test3{ border:10px solid #000; -moz-column-count:5; -webkit-column-count:5; column-count:5; } </style> </head> <body> <h1>列数及列宽固定:</h1> <div class="test"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> <h1>列宽固定，根据容器宽度液态分布列数:</h1> <div class="test2"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> <h1>列数固定，根据容器宽度液态分布列宽:</h1> <div class="test3"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492831 joue