CSS 三栏布局

news2024/11/18 15:33:03

左右两列定宽，中间自适应

浮动+margin

<style>
    .container {
      width: 500px;
      height: 200px;
      line-height: 200px;
    }
    .left {
      width: 100px;
      height: 100%;
      float: left;
      background: orange;
      text-align: center;
    }
    .right {
      width: 100px;
      height: 100%;
      float: right;
      background: blue;
      text-align: center;
    }
 
    .center {
      height: 100%;
      margin-left: 100px;
      margin-right: 100px;
      background: oldlace;
    }
  </style>
  <div class="container">
    <div class="left">left固定</div>
    <div class="right">right固定</div>
    <div class="center">中间自适应</div>
  </div>

浮动+BFC

<style>
    .container {
      width: 500px;
      height: 200px;
      line-height: 200px;
    }
    .left {
      width: 100px;
      height: 100%;
      float: left;
      background: orange;
      text-align: center;
    }
    .right {
      width: 100px;
      height: 100%;
      float: right;
      background: blue;
      text-align: center;
    }
 
    .center {
      height: 100%;
      /* 触发BFC */
      overflow: hidden;
      background: oldlace;
      text-align: center;
    }
  </style>
  <div class="container">
    <div class="left">left固定</div>
    <div class="right">right固定</div>
    <div class="center">中间自适应</div>
  </div>

flex

<style>
    .container {
      width: 500px;
      height: 200px;
      line-height: 200px;
      display: flex;
    }
    .left {
      width: 100px;
      height: 100%;
      float: left;
      background: orange;
      text-align: center;
    }
    .right {
      width: 100px;
      height: 100%;
      float: right;
      background: blue;
      text-align: center;
    }
 
    .center {
      height: 100%;
      flex: 1;
      background: oldlace;
      text-align: center;
    }
  </style>
  <div class="container">
    <div class="left">left固定</div>
    <div class="center">中间自适应</div>
    <div class="right">right固定</div>
  </div>

table布局

注意容器的顺序

<style>
    .container {
      width: 500px;
      height: 200px;
      line-height: 200px;
      display: table;
    }
    .left {
      width: 100px;
      height: 100%;
      display: table-cell;
      background: orange;
      text-align: center;
    }
    .right {
      width: 100px;
      height: 100%;
      display: table-cell;
      background: blue;
      text-align: center;
    }
 
    .center {
      height: 100%;
      display: table-cell;
      background: oldlace;
      text-align: center;
    }
  </style>
  <div class="container">
    <div class="left">left固定</div>
    <div class="center">中间自适应</div>
    <div class="right">right固定</div>
  </div>

定位

<style>
    .container {
      width: 500px;
      height: 200px;
      line-height: 200px;
      position: relative;
    }
    .left {
      width: 100px;
      height: 100%;
      background: orange;
      text-align: center;
      position: absolute;
      left: 0;
    }
    .right {
      width: 100px;
      height: 100%;
      background: blue;
      text-align: center;
      position: absolute;
      right: 0;
    }
 
    .center {
      height: 100%;
      background: oldlace;
      text-align: center;
      margin: 0 100px;
    }
  </style>
  <div class="container">
    <div class="left">left固定</div>
    <div class="right">right固定</div>
    <div class="center">中间自适应</div>
  </div>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1118280.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！