【CSS/HTML】CSS实现两列布局,一列固定宽度,一列宽度自适应方法

文章目录

不管是左是右,反正就是一边宽度固定,一边宽度自适应。

博客的很多主题也是这样设计的,我的其他博客也是右侧固定宽度,左侧自适应屏幕的布局方式。

html代码:

复制代码
<div id="wrap">
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>

实现方式方式有如下几种:

1.固定宽度区浮动,自适应区不设宽度而设置 margin

我们以右侧宽度固定,左侧宽度自适应为例:

css代码:

复制代码
#sidebar {
  float: right; 
  width: 300px;
}
#content {
  margin-right: 300px;
}

实现效果图:

右侧一直固定不动,左侧根据屏幕的剩余大小自适应。

但实际上这个方法是有局限性的,那就是html结构中sidebar必须在content之前才行

但我需要sidebar在content之后!因为我的content里面才是网页的主要内容,我不想主要内容反而排在次要内容后面。

那么上面讲解的第一种方法就无效了。

就需要下面的方法来实现。

2.float与margin配合使用

首先我们调整一下html结构:

复制代码
<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">
    <div class="contentInner">
       自适应区
    </div>
  </div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

css代码:

复制代码
#content {
  margin-left: -300px; float: left; width: 100%;
}
#content .contentInner{
  margin-left:300px;
}
#sidebar {
  float: right; width: 300px;
}

这样实现,contentInner的实际宽度就是屏幕宽度-300px。

3.固定宽度区使用绝对定位,自适应区设置margin

html结构:

复制代码
<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

css代码:

复制代码
#wrap{
  position:relative;
}
#content {
  margin-right:300px;
}
#sidebar {
  position:absolute;
  width:300px;
  right:0;
  top:0;
}

4.使用display:table实现

html结构:

复制代码
<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

css代码:

复制代码
#wrap{
  display:table;
  width:100%;
}
#content {
  display:table-cell;
}
#sidebar {
 width:300px;
  display:table-cell;
}
相关推荐
夏天想1 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z9 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982415 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴20 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干24 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗26 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder30 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder34 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
snakeshe101034 分钟前
优化 Mini React:实现组件级别的精准更新
前端
前端小盆友35 分钟前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js