Une brève discussion sur les nouvelles fonctionnalités de CSS3 : module de mise en page multi-colonnes

CSS3 a ajouté un nouveau module de mise en page multi-colonnes (Multi-column Layout Module), qui est principalement utilisé dans la mise en page multi-colonnes du texte.

Les multi-colonnes peuvent être divisées en :

①Nombre de colonnes et largeur de colonne : colonne -count , column-width, columns

column-count : La valeur est un entier positif sans unité, indiquant le nombre de colonnes pour la classification multi-colonnes. auto (nombre de colonnes déterminé en fonction de la largeur des colonnes et d'autres paramètres). IE ne prend pas en charge cet attribut. Sous Firefox et Webkit, vous devez ajouter les préfixes -moz et -webkit.

column-width : Indique la largeur de colonne de Multi-column. Son unité est px ou em, mais il ne peut pas s'agir d'un nombre négatif. La valeur par défaut est auto (le nombre de colonnes est. déterminé par d'autres paramètres tels que le nombre de colonnes). Défini, mais le nombre de colonnes ne peut pas être automatique pour le moment). IE ne prend pas en charge cet attribut, mais Opera11+ le prend en charge. Sous Firefox et Webkit, les préfixes -moz et -webkit doivent être ajoutés.

colonnes : combinez les attributs de largeur de colonne et de nombre de colonnes. Ce mode d'abréviation n'est pris en charge que sous Webkit et Opera, pas Firefox.

Si la largeur de colonne et l'espacement de colonne sont définis en même temps, la largeur réelle de la colonne sera ajustée en fonction de l'espacement de colonne et peut ne pas être égale à la largeur de colonne définie. valeur.

Lorsque la largeur de colonne définie est supérieure à la largeur du conteneur d'éléments, le contenu de l'élément ne sera pas disposé en fonction de la largeur de la colonne et le conteneur sera seulement cassé. réduisez la largeur de la colonne à la largeur du conteneur égale.

Afin d'adapter les colonnes à différentes tailles d'écran, il est préférable de définir une largeur de colonne exacte ou un nombre de colonnes, et de spécifier les attributs associés en conséquence, tels que la largeur, la taille des colonnes. espace, colonne de l'élément -rule-width, etc. Si column-gap, column-rule-width utilise des valeurs par défaut, il est préférable d'écrire clairement les valeurs de column-gap, column-width et column-count dans conceptions multi-colonnes.

②　Espacement des colonnes et style de colonne : espacement de colonne, couleur de règle de colonne, règle de colonne -style, column-rule-width, column-rule

Dans la disposition en colonnes, l'espace entre les colonnes est équivalent à l'espace entre deux colonnes, similaire à la marge ; la règle de colonne équivaut à une ligne de séparation, semblable à une bordure. column-gap et olumn-rule ont des hauteurs, et leur hauteur est la même que la hauteur de la colonne. La plus grande différence est que column-gap n'a aucun style et occupe un certain espace entre les colonnes, tandis que column-rule a un style. certain style. Semblable aux bordures, il existe des styles.

L'unité d'espacement de colonne est px ou em, mais ne peut pas être un nombre négatif. La valeur par défaut est normale (1em). IE ne prend pas en charge cet attribut, mais Opera11+ le prend en charge. Sous Firefox et Webkit, les préfixes -moz et -webkit doivent être ajoutés.

Bien que l'espacement des colonnes puisse être utilisé pour modifier la distance entre les colonnes adjacentes, lorsque la largeur de colonne est définie sur plusieurs éléments de colonne en même temps, la somme de l'espacement des colonnes et de la colonne -width Lorsqu'elle est plus grande que la largeur totale de plusieurs colonnes d'éléments, les colonnes seront brisées et affichées dans la première colonne. À ce moment, la largeur de la colonne sera automatiquement ajustée à la largeur totale des éléments.

column-rule a également des propriétés similaires à border : width column-rule-width (la valeur par défaut est moyenne), style column-rule-style (la valeur par défaut est aucune), color column -rule-color, la différence est que la bordure occupe une certaine position spatiale, tandis que la règle de colonne n'occupe aucune position spatiale. L'augmentation de la largeur de la règle de colonne n'affectera pas la disposition de la colonne, mais l'étendra uniquement des deux côtés. de l’élément jusqu’au bord de l’élément.

③　Sauts de colonne : pause avant, pause après, pause à l'intérieur

Il existe actuellement très peu de navigateurs pris en charge et ne seront pas encore introduits.

④　Remplir la colonne : remplissage de colonne

Il existe actuellement très peu de navigateurs pris en charge, nous ne les présenterons donc pas encore.

⑤　Colonnes étendues : colonne-span

column-span est principalement utilisé pour définir le nombre de colonnes que les sous-éléments d'un élément de colonne peuvent s'étendre. Parfois, il est nécessaire qu'un certain contenu ou titre ne soit pas divisé en colonnes, mais s'étende sur toutes les colonnes. Dans ce cas, l'attribut column-span est nécessaire. La valeur par défaut est none, ce qui signifie qu'elle ne s'étend sur aucune colonne ; all signifie qu'elle s'étend sur toutes les colonnes. Les seuls navigateurs actuellement pris en charge sont Safari, Chrome et Opera11+. Sous Webkit, le préfixe -webkit est requis.

.multiColumns {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}
.multiColumns h1 {
	background: red;
	-webkit-column-span: all;
	column-span: all;
}

Recommandations associées :

Plan de mise en page - mise en page multi-colonnes

Mise en page multi-colonnes HTML-css

À propos de la mise en page multi-colonnes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!