邵阳住建部网站,如何做网站的关键词,家政网站建设方案分析,建设项目自主验收公示的网站过往的实现方法是使用浮动加计算布局来实现#xff0c;当flex和grid问世时#xff0c;这一切将变得简单起来 一、简单的两列实现
1、先看页面效果 2、css代码 .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 2… 过往的实现方法是使用浮动加计算布局来实现当flex和grid问世时这一切将变得简单起来 一、简单的两列实现
1、先看页面效果 2、css代码 .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.grid {display: grid;grid-auto-flow: column;}
3、html代码 div classcontainerflex布局/divdiv classcontainer flexboxdiv classcolumndiv classelementp 松饼冰淇淋小熊软糖。甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/div/divdiv classcontainergrid布局/divdiv classcontainer griddiv classcolumndiv classelementp松饼冰淇淋小熊软糖。甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/div/div 二、每行放置3列多出来的自动到下一行
1、还是先看页面效果 2、css代码 .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.flexbox.col-3 {flex-wrap: wrap;}.flexbox.col-3 .column {margin: 0.5rem;width: calc((100% / 3) - 1rem);}.grid {display: grid;grid-auto-flow: column;}.grid.col-3 {grid-gap: 1rem;grid-template-columns: repeat(3, 1fr);grid-auto-flow: unset;}.grid.col-3 .column {margin: 0;}
3、html代码
div classcontainerflex布局/divdiv classcontainer flexbox col-3div classcolumndiv classelementpflexbox col-3: 甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/divdiv classcolumndiv classelementp松饼冰淇淋小熊软糖。甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp蛋奶酥馅饼柠檬糖小熊软糖棒棒糖甜点芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/div/divdiv classcontainergrid布局/divdiv classcontainer grid col-3div classcolumndiv classelementpgrid col-3:甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/divdiv classcolumndiv classelementp松饼冰淇淋小熊软糖。甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp蛋奶酥馅饼柠檬糖小熊软糖棒棒糖甜点芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/div/div
三、全部代码 !DOCTYPE html
html langen
headmeta charsetUTF-8title使用flex和grid实现等高元素布局/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}.container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.flexbox.col-3 {flex-wrap: wrap;}.flexbox.col-3 .column {margin: 0.5rem;width: calc((100% / 3) - 1rem);}.grid {display: grid;grid-auto-flow: column;}.grid.col-3 {grid-gap: 1rem;grid-template-columns: repeat(3, 1fr);grid-auto-flow: unset;}.grid.col-3 .column {margin: 0;}/style
/head
bodydiv classcontainerflex布局/divdiv classcontainer flexboxdiv classcolumndiv classelementp 松饼冰淇淋小熊软糖。甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/div/divdiv classcontainergrid布局/divdiv classcontainer griddiv classcolumndiv classelementp松饼冰淇淋小熊软糖。甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/div/divdiv classcontainerflex布局/divdiv classcontainer flexbox col-3div classcolumndiv classelementpflexbox col-3: 甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/divdiv classcolumndiv classelementp松饼冰淇淋小熊软糖。甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp蛋奶酥馅饼柠檬糖小熊软糖棒棒糖甜点芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/div/divdiv classcontainergrid布局/divdiv classcontainer grid col-3div classcolumndiv classelementpgrid col-3:甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/divdiv classcolumndiv classelementp松饼冰淇淋小熊软糖。甜苹果派蛋糕糖果胡萝卜蛋糕。糖蛋奶酥柠檬糖软糖。/p/div/divdiv classcolumndiv classelementp蛋奶酥馅饼柠檬糖小熊软糖棒棒糖甜点芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。/p/div/div/div
/body
/html
