首页 / HTML / 实现一个三列布局(左右侧固定，中间自适应宽度)-jimmie.Mr

实现一个三列布局(左右侧固定，中间自适应宽度)-jimmie.Mr

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了实现一个三列布局(左右侧固定，中间自适应宽度)-jimmie.Mr，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1225字，纯文字阅读大概需要2分钟。

内容图文

html代码(第一二种方法): 
<div class="left">左侧固定区</div>
<div class="right">右侧固定区</div>
<div class="mid">中间自适应区</div>

css代码：

第一种方法（定位）：

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-color: red;
 }

 .mid {
  margin-left: 100px;
  margin-right: 200px;
  height: 200px;
  background-color: blue;
 }

 .right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-color: yellow;
 }

第二种方法（浮动）：

.left {
 float: left;
 width: 100px;
 height: 200px;
 background-color: red;
}

.mid {
 height: 200px;
 background-color: blue;
}

.right {
 float: right;
 width: 200px;
 height: 200px;
 background-color: yellow;
}

第三种方法（负边距）：

html代码：

<div class="center fl">
  <div class="mid">
     中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区
  </div>
</div>

<div class="left fl">左边固定区</div>

<div class="right fl">右边固定区</div>

css代码：

.fl { float: left; }

.center {
  width: 100%;
  height: 200px;
  background: yellow;
}
  .center .mid{
    margin-right: 100px;
    padding: 0 110px;
  }

.left{
    margin-left: -100%;
    width: 100px;
    height: 200px;
    background: green;
}

.right{
    margin-left: -200px;
    width: 200px;
    height: 200px;
    background: blue;
}

内容总结

以上是互联网集市为您收集整理的实现一个三列布局(左右侧固定，中间自适应宽度)-jimmie.Mr全部内容，希望文章能够帮你解决实现一个三列布局(左右侧固定，中间自适应宽度)-jimmie.Mr所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/408791.html

来源：【匿名】