Nouvelles propriétés en CSS3 : résumé des propriétés de mise en page multi-colonnes CSS3 (avec exemples)

L'attribut de mise en page multi-colonnes a été ajouté en CSS3. Qu'est-ce que la mise en page multi-colonnes ? La mise en page dite multi-colonnes consiste à créer plusieurs colonnes pour disposer le texte, similaire à la mise en page d'un journal. Ainsi, dans cet article, nous examinerons certaines propriétés associées et des exemples de code dans une mise en page multi-colonnes.

Attributs du conteneur de mise en page multi-colonnes CSS3 :

colonne-largeur : auto <:>Définir une largeur minimale pour la colonne (largeur minimale).

auto : la largeur de la colonne est déterminée par d'autres éléments.

length : définit explicitement la largeur minimale.

column-count: auto | integer > : Définissez le nombre de colonnes.

auto : Il n'y a qu'une seule colonne d'éléments. C'est comme s'il n'y avait pas de réglage.

: valeur entière positive. La valeur est un entier supérieur à 0 et les valeurs négatives ne sont pas valides.

colonnes :  : est l'abréviation de column-width et de column-count. N'importe quelle commande.

Largeur de colonne = (largeur de l'élément parent - (nombre de colonnes-1) écart de colonne) / nombre de colonnes *
Par exemple : l'élément parent fait 40em, divisé en 4 colonnes, et l'écart de colonne est 2em. La largeur de la colonne est alors de (40 - (4-1) * 2) / 4 = 8,5em.
Si la largeur de colonne explicitement définie est inférieure à cette largeur, elle sera affichée à cette largeur.
Si la largeur de colonne explicitement définie est supérieure à cette largeur, la largeur de colonne et le nombre de colonnes seront réorganisés en fonction de la taille appropriée. Les largeurs de colonnes et le nombre de colonnes actuellement définis ne sont pas précis.

espace-colonne : normal  : Définir l'espacement des colonnes. Si la valeur est trop grande, la mise en page sera interrompue.

normal : valeur par défaut, analysée par le navigateur, généralement lem.
 : une valeur de longueur composée d'un nombre à virgule flottante et d'un identifiant d'unité. Tels que : 2.1em.

colonne-règle :

Sa ligne médiane est toujours la même que la ligne médiane de l'espacement des colonnes. Autrement dit, il se trouve toujours au milieu de deux colonnes. Semblable à la frontière. Si la bordure de la colonne est plus grande que l'espacement des colonnes, elle ne disparaîtra pas automatiquement. La partie de la bordure de colonne qui s'étend au-delà de l'espacement des colonnes semble s'enfoncer sous le texte (effet d'arrière-plan).

column-fill: auto | balance : Définissez si la hauteur de chaque colonne dans plusieurs colonnes est uniforme.

Cet attribut est très étrange. Et ce n'est pas uniforme entre les navigateurs. Il a deux valeurs : auto | équilibre. exister Les résultats des tests dans ie10/ie11/opera40/chrome52 sont tous identiques et il s'avère qu'il n'y a aucune différence entre ces deux propriétés. Lors des tests dans Firefox 49, il existe une différence entre ces deux propriétés. Balance signifie que la hauteur de chaque colonne est presque la même (alignée) et les fusionne automatiquement en une seule colonne, quel que soit le nombre de colonnes que vous définissez.

Attributs d'élément (élément) de mise en page multi-colonnes CSS3 :

column-span : none all : Définissez le nombre de colonnes qu'un élément s'étend. .

Si on met souvent le titre sur toutes les colonnes. Ensuite, colonne-span : tout. La valeur par défaut est column-span : none ; indiquant qu'il n'y a pas d'étendue de colonnes.

Code de mise en page multi-colonnes CSS3 :

     nbsp;html>
    
    
        <meta>
        <meta>
        <meta>
        <title>多列布局｜column-span</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper {  
            width: 40em;
            margin:0 auto;
            border: 1px solid #ccc;
            /*多列布局*/
            -moz-column-count: 4;
            -webkit-column-count: 4;
            column-count: 4;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -moz-column-rule: .1em dashed #ccc;
            -webkit-column-rule: .1em dashed #ccc;
            column-rule: .1em dashed #ccc;
            -webkig-column-fill: balance;
            -moz-column-fill: balance;
            column-fill: balance;
        }
        h1 {
            font-size: 1.5em;
            margin-bottom: 1em;
            -moz-column-span: all;
            -webkit-column-span: all;
            column-span: all;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        p {
            margin-bottom: 1em;
            text-indent: 2em;
            line-height: 1.625;
            font-size: .7em;
        }
    </style>


    <div>
        <h1>为什么您宁愿吃生活的苦，也不愿吃学习的苦？</h1>
      <h3>一. 为什么大多数人宁愿吃生活的苦，也不愿吃学习的苦？</h3>
        <p>记得小时候上学，学校每次放月假，爷爷就去车站接我回家。
那时家里离车站远，需要骑着车子来回。
一路上我们彼此相对无语，等到爷爷骑不动了，我们就这么一前一后推着车子走着，记得爷爷常常和我说：
“吃得苦中苦，方为人上人，你日后要好生读书。”
那时的我未解其意，只是默默记在心里，望着不远处稻田里的乡亲们弯腰割麦俯首插秧，我觉着他们太辛苦了。
几年过去了，我考入了省城上大学，学了这个城市最热门也最富前景的工程造价专业。
后来，我走进实习单位， 工地的环境有多么糟糕自不必多说，晴天尘土飞扬骄阳似火，雨天泥泞不堪污水四溢。
物质世界的贫瘠尚可以忍受，然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。
后来，我选择去了深圳，在那里我终于找到了自己热爱的行业，眼前陌生的一切都让我感到兴奋和欢愉。
人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。
越是不断地拓宽知识面，越是觉得自己知识储备量的贫瘠与荒凉。</p>
        <h3>二. 生活的痛苦使人麻痹，学习的痛苦让人清醒 ；过去不按思维而生活，终将有一天要按照生活而思维</h3>
        <p>痛苦之所以不被人喜欢，大多数是因为人们从不会思考自己为何痛苦。
然而，这世上还有另一种痛苦是，对这个世界产生了失望的情绪，然后把自己对这个世界的失望，当作是自己本该如此，甚至误以为这就是吃苦的好处。
我总觉得苦难的意义，在于我们更好地去思考人生为何如此苦难，就像有人曾说：未经省察的人生，从不值得一过。
如果没有经过思索和自省，苦难终究只是苦难而已，没有任何意义。
有些人，年轻时总觉得学不学习无关紧要，反正自己体力好得很，只要自己身体好就能混口饭吃。
他们终将会明白，那些为了讨生活不得已而吃的苦，就是当年不吃学习苦的代价。
学习的苦，是枯燥的苦，是短期没有回报的苦，这种苦看得见，摸得着，谁都不愿吃。
生活的苦，是绝望的苦，是长期没有出路的苦，这种苦看不见，摸不着，谁都不想吃。
我从不喜欢自讨苦吃，如果我能通过学习和自我提升避免遇见这些痛苦的经历，我有什么理由不去学习？
生活其实并不苦，苦的是那个不知苦也不知如何避免吃苦的人生。
学习其实并不苦，苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p>
    </div>

Effet d'exécution :

Articles connexes recommandés :

css3-columns multi-column layout_html/css_WEB-ITnose

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

Colonnes CSS3 disposition en colonnes facile à utiliser

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!