江苏龙网

  1. 主页 > 生活百科 > >

超详细常用css布局( 四 )

css

 
grid布局<style>.container {display: grid;grid-auto-flow: column;}.left {background-color: #ce5a4b;}.main {background-color: #f8cf5f;height: 300px;}.right {background-color: #499e56;}</style><body><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div></body>复制代码 
五、品字形布局 

超详细常用css布局

文章插图
 
inline或float布局方式实现步骤：
  1. 三块高宽是确定的；
  2. 上面那块用margin: 0 auto;居中；
  3. 下面两块用inline-block或者float不换行
  4. 用margin调整位置使他们居中(使left元素margin-left为宽度的一般则可居中)
实现方式一：
<style>.container > div {height: 300px;width: 300px;}.top {margin: 0 auto;background-color: #f8cf5f;}.left {display: inline-block;// float: left;margin-left: 150px;background-color: #499e56;}.right {display: inline-block;// float: left;background-color: #ce5a4b;}</style><body><div class="container"><div class="top">上</div><div class="left">左</div><div class="right">右</div></div></body>复制代码实现方式二：
//与上述实现道理基本相同，不同的是left和right元素布局<style>.container>div {height: 300px;width: 300px;}.top {margin: 0 auto;background-color: #f8cf5f;}.left {display: inline-block;// float: left;margin-left: -600px;background-color: #499e56;}.right {display: inline-block;// float: left;margin-left: 50%;background-color: #ce5a4b;}</style><body><div class="container"><div class="top">上</div><div class="right">右</div><div class="left">左</div></div></body>复制代码
缺点：使用inline-block会有小的间隙
 
全屏的品字布局实现步骤：
  1. 上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可
<style>.container>div {height: 200px;}.top {width: 100%;background-color: #f8cf5f;}.left {// display: inline-blockfloat: left;width: 50%;background-color: #499e56;}.right {// display: inline-blockfloat: left;width: 50%;background-color: #ce5a4b;}</style><body><div class="container"><div class="top">上</div><div class="left">左</div><div class="right">右</div></div></body>复制代码 
六、瀑布流布局 
超详细常用css布局

文章插图
 
multi-columns 方式实现步骤：
  1. 瀑布流容器中设置 column-count（列数） 和 column-gap（列间距）
  2. item 中设置 break-inside:avoid，这是为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局 。
  3. 为了布局具有响应式效果，可以借助媒体查询属性，在不同屏幕大小的条件下设置瀑布流容器 container 的 column-count 来自适应改变列数
<style>.container {-moz-column-count: 3;/* Firefox */-webkit-column-count: 3;/* Safari 和 Chrome */column-count: 3;-moz-column-gap: 2em;-webkit-column-gap: 2em;column-gap: 2em;width: 70%;margin: 2em auto;}.item {padding: 2em;margin-bottom: 2em;-moz-page-break-inside: avoid;-webkit-column-break-inside: avoid;break-inside: avoid;background: #ce5a4b;color: #fff;text-align: center;}.item .content-lar {height: 200px;}.item .content-mid {height: 100px;}.item .content-sma {height: 50px;}@media screen and (max-width: 800px) {.container {column-count: 2;/* two columns on larger phones */}}@media screen and (max-width: 500px) {.container {column-count: 1;/* two columns on larger phones */}}</style><body><div class="container"><div class="item"><div class="item_content content-lar"> 1 我最大 </div></div><div class="item"><div class="item_content content-sma"> 2 我最小 </div></div><div class="item"><div class="item_content content-mid"> 3 我中等 </div></div><div class="item"><div class="item_content content-sma"> 4 我最小 </div></div><div class="item"><div class="item_content content-mid"> 5 我中等 </div></div><div class="item"><div class="item_content content-lar"> 6 我最大 </div></div><div class="item"><div class="item_content content-sma"> 7 我最小 </div></div><div class="item"><div class="item_content content-lar"> 8 我最大 </div></div><div class="item"><div class="item_content content-lar"> 9 我最大 </div></div><div class="item"><div class="item_content content-sma"> 10 我最小 </div></div><div class="item"><div class="item_content content-mid"> 11 我中等 </div></div><div class="item"><div class="item_content content-mid"> 12 我中等 </div></div><!-- more items --></div></body>复制代码


推荐阅读


上一篇：广西昭平,茶农赶采白露茶

下一篇：永春县佛手茶品牌形象大使选拔赛报名启动