中间部分自适应宽度并且优先加载的三栏布局

最新推荐文章于 2023-03-23 16:41:19 发布

kiscon

最新推荐文章于 2023-03-23 16:41:19 发布

阅读量879

点赞数

文章标签： css flex css3

本文链接：https://blog.csdn.net/kiscon/article/details/106572015

版权

背景

在笔试题中，会经常遇到实现一个三栏布局，下面用代码实现一个中间部分要自适应宽度并且优先加载，左边宽100px；右边栏宽160px的三栏布局

float布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏布局--float形式</title>
</head>
<style>
  .box{
    float: left;
    width: 100%;
  }
  .middle{
    height: 100px;
    background-color: #f00;
    margin: 0 160px 0 100px;
  }
  .left{
    float: left;
    width: 100px;
    height: 100px;
    margin-left: -100%;
    background-color: #ff0;
  }
  .right{
    float: left;
    width: 160px;
    height: 100px;
    margin-left: -160px;
    background-color: #00f;
  }
</style>
<body>
  <div class="box">
    <div class="middle"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</body>
</html>

flex布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏布局--flex形式</title>
</head>
<style>
  ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    width: 100%;
  }
  .middle2{
    order: 2;
    flex: 1;
    height: 100px;
    background-color: #f00;
  }
  .left2{
    order: 1;
    width: 100px;
    height: 100px;
    background-color: #ff0;
  }
  .right2{
    order: 3;
    width: 160px;
    height: 100px;
    background-color: #00f;
  }
</style>
<body>
  <ul>
    <li class="middle2"></li>
    <li class="left2"></li>
    <li class="right2"></li>
  </ul>
</body>
</html>

gird布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>三栏布局--gird形式</title>
</head>
<style>
  .gird{
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 100px auto 160px;
  }
  .middle3{
    order: 2;
    background-color: #f00;
  }
  .left3{
    order: 1;
    background-color: #ff0;
  }
  .right3{
    order: 3;
    background-color: #00f;
  }
</style>
<body>
  <div class="gird">
    <div class="middle3"></div>
    <div class="left3"></div>
    <div class="right3"></div>
  </div>
</body>
</html>

kiscon

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
中间部分自适应宽度并且优先加载的三栏布局

背景在笔试题中，会经常遇到实现一个三栏布局，下面用代码实现一个中间部分要自适应宽度并且优先加载，左边宽100px；右边栏宽160px的三栏布局float布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三栏布局--float形式</title></head><style> .box{ flo
复制链接

扫一扫