HTML+CSS两栏三栏布局与垂直居中
时间：2023-04-05 13:43:56
HTML5
本次要讲解的是HTML+CSS两栏三栏布局与垂直居中的实现。由于我的知识有限，我可能不会列出所有的实现方法，但我会继续努力，以填补空白。1.两栏布局（左固定，右改编）先写初始样式和结构。Loremipsumdolorsitamet
Loremipsumdolorsitamet div{height:200像素；颜色：#fff;}float+marginimplementation.left{float:left;宽度：300px；背景色：#5616;}.right{宽度：100%;左边距：300px；背景色：#438；}positionimplementation.left{position:absolute;左：0；宽度：300px；背景色：#5616;}.right{宽度：100%;左边距：300px；背景色：#438；}flex.container{display:flex;}.left{flex:00300px;背景色：#5616;}.right{flex:11;背景色：#438；原因。2、三列布局float+margin方法>
Loremipsumdolorsitamet div{height:200px;颜色：#fff；}.main{宽度：100%；左边距：300px；右边距：100px；背景色：#554;}.left{float:left;宽度：300px；背景颜色：#5616;}.right{float:right;宽度：100px；背景色：#438；位置implementation.main{width:100%;左边距：300px；右边距：100px；背景色：#554；}.left{位置：绝对；左：0px；宽度：300px；#5616;}.right{位置：绝对；右：0px；宽度：100px；背景色：#438；}上面的实现方式，虽然实现了，但是还不够好。由于main是主要显示区域，所以我们应该先加载它，然后再加载其他地方。网格implementation.container{显示：网格；网格模板列：300??px自动100px；//列宽}.main{grid-row:1;//行数background-color:#554;}.left{grid-row:1;//行数background-color:#5616;}.right{grid-row:1;//行数background-color:#438;}HolyGraillayout.container{padding:0100px0300px;溢出：隐藏；}.main{浮动：左；宽度：100%；背景色：#554；}.left{位置：相对；-左：-100%；背景色：#5616；}.right{位置：相对；向左飘浮;右：-100px；左边距：-100px；宽度：100px；背景色：#438；双飞翼布局