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

utilisation de l'espacement des colonnes CSS3

Utilisation de l'espacement des colonnes CSS3

L'attribut column-gap est utilisé pour spécifier la distance entre les colonnes.
Structure de syntaxe :

espace-colonne : normal |<longueur>

Liste de paramètres :
(1).normal : valeur par défaut, valeur par défaut Ceci est la taille de police actuelle.
(2).length : valeur de longueur, qui peut être px, em ou pourcentage, etc.
Prise en charge des navigateurs :
(1) Les navigateurs IE10 et IE10 et supérieurs prennent en charge cet attribut.
(2). Google Chrome prend en charge cet attribut.
(3). Le navigateur Firefox prend en charge cet attribut. Le navigateur
(4).opera prend en charge cet attribut.
(5).Le navigateur Safari prend en charge cet attribut.
Remarque spéciale :
Le navigateur Firefox doit ajouter le préfixe -moz-.
Les navigateurs Google et Safari doivent ajouter le préfixe -webkit-.
Exemple de code :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.columns {
  border: 1px solid green;
  width: 600px;
  margin: 20px auto;
 
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}
</style>
</head>
<body>
<div class="columns">
互联网的出现，极大的促进了信息的交流，随着步伐的前进，网站的交互需求越来越多，但是受限于当时的软硬件条件，
特别是网络环境的限制，非常简单的表单验证都要花费大量的时间在服务器与客户端之间进行传输，
后来改名为JavaScript。随着JavaScript在互联网上的成功运用，微软公司也随之开发了自己的"JavaScript"名叫JScript，
于是在互联网上就出现多种标准的"JavaScript"脚本语言，如果任其发展下去，那么将会严重影响互联网发展，
于是标准化迫在眉睫。最后JavaScript被提交给提交给欧洲计算机制造商协会（ECMA），
并最终推出了ECMA-262标准，定义了名为ECMAScript的脚本语言，从此以后浏览器都将ECMAScript作为JavaScript的实现基础。
</div>
</body>
</html>

Le code ci-dessus peut définir l'espacement entre les colonnes à 40 px.

Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> .newspaper { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p> <div class="newspaper"> 当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。 </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)  492962 joue