Disposition du Graal et disposition des ailes doubles pour la disposition CSS (v)

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Recommandations antérieures：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028214235083571237","title":"","type":null},"content":[{"type":"text","text":"CSSMise en page en plein écran","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028594112873889800","title":"","type":null},"content":[{"type":"text","text":"CSSMise en page（2.）La disposition des colonnes","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7028929502994513928","title":"","type":null},"content":[{"type":"text","text":"CSSMise en page（Trois） Disposition de la Division ","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"「","attrs":{}},{"type":"link","attrs":{"href":"https://juejin.cn/post/7029296320233897991","title":"","type":null},"content":[{"type":"text","text":"CSSMise en page（Quatre） Mise en page du texte ","attrs":{}}]},{"type":"text","text":"」","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"Préface","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":" Disposition du Graal et disposition des ailes doubles ","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" La disposition du Graal et des ailes jumelles est une sorte de disposition classique, n'est - ce pas? , Il y a trois colonnes à droite et à gauche. , Fixation des colonnes gauche et droite ,Adaptation intermédiaire, Hauteur fixe et égale . Voyons comment ça se passe. .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b2/b2d25332a2dc20cc7f3b2a129a81de27.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"AdoptionfloatEtmargin/pading Réalisation","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" En gros, la disposition du Graal est la même que celle des ailes doubles. , Mais les détails sont différents. .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Même chose.：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Adaptation par colonne intermédiaire ,Pour finir.","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Adoptionfloat Faire flotter les colonnes gauche et droite à gauche et à droite .","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"C'est différent.：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Disposition du Graal： Passage du noeud parent padding Est la position des colonnes gauche et droite .","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Disposition des ailes doubles： Passage de la colonne intermédiaire margin Pour laisser place aux colonnes gauche et droite .","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Attention!： Parce que les noeuds flottants sont plus élevés que les noeuds non flottants avant ou horizontaux , Provoque le naufrage du noeud flottant .Donc C'est en train d'écrireHTMLQuand, Déplacez la colonne du milieu derrière le noeud de la colonne de droite .","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Disposition du Graal","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n width: 1000px;\n height: 800px;\n padding: 0 200px;\n .layout-left {\n float: left;\n width: 200px;\n height: 100%;\n margin-left: -200px;\n background-color: crimson;\n }\n .layout-right {\n float: right;\n width: 200px;\n height: 100%;\n margin-right: -200px;\n background-color: yellow;\n }\n .layout-center {\n height: 100%;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Disposition des ailes doubles","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n width: 1000px;\n height: 800px;\n .layout-left {\n float: left;\n width: 200px;\n height: 100%;\n background-color: crimson;\n }\n .layout-right {\n float: right;\n width: 200px;\n height: 100%;\n background-color: yellow;\n }\n .layout-center {\n margin: 0 200px;\n height: 100%;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"AdoptionflexRéalisation","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Adoptionflex La mise en œuvre est très simple , Paramètres des colonnes intermédiaires flex：1 Peut s'adapter .","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":".layout {\n display: flex;\n width: 1000px;\n height: 800px;\n .layout-left {\n width: 200px;\n background-color: crimson;\n }\n .layout-right {\n width: 200px;\n background-color: yellow;\n }\n .layout-center {\n flex: 1;\n background-color: blue;\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"D'accord.,C'est ici aujourd'hui.,Tu es toujours le meilleur.Allez,Allez,Tu es le meilleur.！Allez,Allez,Tu es le plus fort！Oh, Hugh.,Bye Bye！！！","attrs":{}}]}]}