【CSS】一侧定宽，另一侧自适应的布局该如何去做

一侧定宽，一侧自适应的页面布局在现在用的很多，有哪些实现方式呢？

（个人总结，这个要看是左定右适。还是左适右定。视情况而定）

1, 左边固定，右边自适应：通过浮动和margin取正值来实现：

　　　　　　　　　　　　这里的原理是：margin-left：给左边流出空间，来容纳左浮动的元素；

定宽的元素为#sidebar

自适应的元素为#content

css代码如下：

　　　　　给定宽的元素设置浮动

　　　　　　#sidebar{

　　　　　　　　　　float:left;

　　　　　　　　　　width:200px; height:600px;

　　　　　　　　　　background-color:red;

　　　　　　　　　　}

　　　　　　自适应的元素呢？来给他设置margin-left吧，取值比上面那个元素的宽度大一些就好

　　　　　　#content{

　　　　　　　　　　width:100%; //如果是div块级元素的话，width不设也可以

　　　　　　　　　　height:600px;

　　　　　　　　　　margin-left: 210px;

　　　　　　　　　　background-color:black;

　　　　　　　　　　}

2,左边自适应，右边固定：通过浮动和margin取负值来实现：

　　　　　　　　　　　　这里用到的原理是：margin-right取值为负值的时候，是把下一个元素往自己这边拉过来；

定宽的元素为#sidebar

自适应的元素为#content

css代码如下：

　　　#content{

　　　　　　float:left;

　　　　　　width:100%;

　　　　　　height:600px;

　　　　　　margin-right:-200px;

　　　　　　background-color:black;

　　　　}

　　#sidebar{

　　　　　　float:left;

　　　　　　width:200px;

　　　　　　height:600px;

　　　　　　background-color:red;

　　　　}

3，用position，无论是上面哪种情况：

　　　基本思路是，外元素包含一个内元素：

　　　　　　　　　　外元素的宽度设为100%，position：relative；

　　　　　　　　　　内元素的宽度设为固定宽度，高度一致，若想左侧定宽，left偏移量为0；若想右侧定宽，right偏移量为0；

转载于:https://www.cnblogs.com/better2019/p/8724536.html

【CSS】一侧定宽，另一侧自适应的布局该如何去做相关推荐

background背景图片自适应_一侧定宽、一侧自适应，尽量多的方案实现？「前端剑指offer」...
# 问题一侧定宽.一侧自适应,尽量多的方案实现. # 回答有下面几种方案能实现一侧定宽一侧自适应. 使用flex布局,这也是目前主流方式.父容器设置display:flex,定宽字元素设置flex ...
css高度已知，左右定宽，中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head><meta ...
两边定宽，中间自适应布局的四种实现方法
1. 浮动法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
html 左边距自适应,左边定宽，右边自适应布局的几种方法
实际的页面开发中经常会遇到左边定宽,右边自适应的需求,特别是一些管理系统,比如左边显示信息或操作列表,右边显示详情,如下所示:. 针对这种布局,首先抽象出页面结构如下: 1 2 3 4 5 Docum ...
两列布局左边定宽，右边自适应
效果图: 代码如下: <html> <head> <title>文章标题</title> <meta http-equiv="Conte ...
左列定宽,右列自适应
利用float+margin HTML代码 <body> <div id="left">左列定宽</div> <div id=" ...
实现两边定宽，中间自适应布局（三栏布局）的七种方法
浮动法 <style type="text/css">html,body{height: 100%;margin: 0;} div{height: 100%;}.lef ...
移动端开发注意事项、需要注意的问题、特殊属性、精灵图、座固定有自适应的布局
一.移动端开发注意事项网址:移动端开发注意事项二.关于meta (一).常用的公共meta属性 1.viewport <meta name="viewport"conte ...
html怎么设置左侧区域宽度,【CSS】左侧定宽、右侧宽度自适应布局
又是一道前端的面试题,请实现页面布局,包括页头.内容区域.页脚三部分,其中内容区域为左右分栏,左栏定宽200px.右栏自适应宽度. 虽然是以前应用中碰到过的布局,但现场还是没写对,来重新做一下. 双列 ...

【CSS】一侧定宽，另一侧自适应的布局该如何去做

【CSS】一侧定宽，另一侧自适应的布局该如何去做相关推荐

最新文章

热门文章