原理:父元素设置display:flex,自适应元素设置flex:1 缺点:存在兼容性问题,IE10以下不支持 <!DOCTYPE html> *{ padding: 0; margin: 0; } .box{ height: 600px; width: 100%; display: flex; } .left{ width: 100px; height: 200px; background-color: red; } .right{ flex: 1; height:...
.box{display:flex;}.left{width:100px;}.right{flex:1;}左边右边 flex可以说是最好的方案了,代码少,使用简单 注意的是,flex容器的一个默认属性值:align-items: stretch; 这个属性导致了列等高的效果。 为了让两个盒子高度自动,需要设置: align-items: flex-start 三栏布局 实现三栏布局中间自适应的布局方...
1.给父元素设置 display: grid; 2.去掉左右盒子的宽度并给父元素设置 grid-template-columns:400px auto;这表示左边设置400宽度,右边自适应。 *{margin: 0;padding: 0;} #parent{ width: 100%; height: 500px; /* 网格布局 */ display: grid; /* 每个列的宽度 左 - 400px 右 - 自适应 */ grid-...
.container { display: flex; } .left-column { flex: 1; } .right-column { flex: 1; } 使用Grid布局: 代码语言:css 复制 .container { display: grid; grid-template-columns: 1fr 1fr; } .left-column { grid-column: 1; } .right-column { grid-column: 2; } 使用浮动布局: 代码语言:css...
原理、缺点同上面的flex布局 4.grid布局 原理:父元素设置display:grid,grid-template-columns:auto 1fr;(这个属性定义列宽,auto关键字表示由浏览器自己决定长度。fr是一个相对尺寸单位,表示剩余空间做等分)grid-gap:20px(行间距) 缺点:兼容性太差,IE11都不支持,谷歌57以上才可以 ...
<!DOCTYPE html> Flexbox Two Columns .container { display: flex; height: 100vh; /* 设置容器高度为视口高度 */ } .column { flex: 1; /* 使两列等宽 */ padding: 20px; border: 1px solid #ccc; } .left-column { background-color: #f9f9f9; } .right-column { background-color...
2. 使用display属性 另一种实现多列布局的方法是使用display属性。你可以将容器设置为display:flex，并...
1、display:flex 注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 2、flex-direction属性 决定主轴的方向(即项目的排列方向) flex-direction: row | row-reverse | column | column-reverse; 3、flex-wrap属性,定义子元素是否换行显示 ...
column-count看起来比display: flex更科学,模板不需要2层循环,更简洁明了。如果真正用到数据上面,会更好处理。 $count:32;// 随机数(瀑布流某块的高度)@functionrandomNum($max,$min:0,$u:1){@return($min+random($max))*$u;}// 随机颜色值@functionrandomColor(){@returnrgb(randomNum(255),randomNu...
column-count 看起来比display: flex更科学,模板不需要2层循环,更简洁明了。如果真正用到数据上面,会更好处理。 代码语言:javascript 复制 $count: 32; // 随机数(瀑布流某块的高度) @function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } // 随机颜色值 @fun...