css布局,单列宽度固定,另一列自适应。

author author     2023-03-21     388

关键词:

CSS布局 ,要求是满屏显示,分成两列显示,其中左边 单列宽度固定,右边一列自适应。能根据不同的显示屏分辨率,右边一列可以占满剩下的屏幕。请问该如何设置。

左边单列固定宽度,如:width:100px;height:auto;
右边一列自适应:width:auto;height:auto;
首先要将body的margin:0px;padding:0px;
参考技术A 如果你设置好浮动了,左边的布局宽度固定,右边的布局宽度设置100%就行了 参考技术B #left
position: absolute;

left: 0px;
top: 0px;

width: 300px;

height: 100%;


#right
width: auto; /*这行可以不写,默认就是auto*/

height: 100%;

margin-left: 300px;

css基础知识点小计1-选择符权重优先级及两列布局中一列自适应,另一列固定宽度

1:标有!important标记的样式2:HTML编辑的样式3:用户设置的样式4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用<!DOCTYPEhtml><html><head> <title> html5 </title> <linkrel="stylesheet"... 查看详情

常见的布局实现,如弹性布局,两列、三列布局

参考技术A一列固定宽度,另一列自适应宽度如下图所示:第一列固定宽度200px,第二列自适应。边上两列固定宽度,中间自适应注意html的写法,左右两列,也就是1,3列应该写在一起,中间列写在最后效果同上 查看详情

两列自适应布局

目的:想要在网页中实现自适应两列布局,即左边一列是固定宽度的,右边一列的宽度等于屏幕宽减去左边的宽度(或相反)。分析:需要满足三个要求:①两个盒子在同一行②右边的盒子需要占满剩下的空间③两个盒子不能重... 查看详情

css---两栏三栏布局

  本文主要总结了两栏布局(两列自适应、一列固定一列自适应)、三栏布局(两边固定中间自适应)的一些方法,以便遗忘时能方便查询。一、两栏布局1、两列自适应  两列自适应是特别简单的布局方式,其要点在于把... 查看详情

使用css实现三栏自适应布局(两边宽度固定,中间自适应)

...et/cinderella_hou/article/details/52156333  所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类,一类是基于position传统的实现,一类是基于cs... 查看详情

两列布局(一列定宽,一列自适应)

用table+table-cell实现两列布局(一列定宽,一列自适应,且table是自动的两列自动登高)1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<styletype="text/css"> 查看详情

(转转转)使用css实现三栏自适应布局(两边宽度固定,中间自适应)

所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类,一类是基于position传统的实现,一类是基于CSS3新特性弹性盒模型布局实现。 1.基... 查看详情

css三列布局

...前面已经介绍过单列定宽单列自适应和两列自适应的两列布局。本文介绍三列布局,分为两侧定宽中间自适应、两列定宽一侧自适应、中间定宽两侧自适应、一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中间自适应... 查看详情

css布局两列布局之单列定宽,单列自适应布局思路

前言说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式。比如斗鱼的直播间,后台管理系统都是常用的我们将从float,inline-block,table,absolute,flex,grid这几个布局方式来实现这种效果float【float+margin】将定宽的一列使... 查看详情

布局-两列布局(一列定宽,一列自适应)

结构:1<divclass="parent">2<divclass="left">3<p>left</p>4</div>5<divclass="right">6<p>right</p>7<p>right</p>8</div>9</div>样式:1.解决方案 查看详情

《web前端笔记30》css三栏布局、左右两栏宽度固定,中间自适应

参考技术A三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,三栏布局的具体实现:利用浮动和负边距来实现。父级元素设置左右的padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为... 查看详情

html-table表格不被撑开,td某些列宽度固定某些列自适应

 table-layout属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css:table,tabletd,tableth{border:1pxsolid#ff0000;border-collapse:collapse;} 2,table表格宽度固定,同 查看详情

css布局的相关几个难点

前几天被问的一种布局方式,三列布局左右两列固定宽度,中间一列自适应的布局方案:1.当然css3里面的flex是可以实现这种情况的,但是这个属性实在是兼容性太差,这里就说一种自己查的普适方案;2.当时第一次看到这个题目... 查看详情

css布局之左侧宽度固定,右侧宽度自适应

方案一:利用padding-left预留空间,左侧脱标,右侧宽度相当于父元素的100%<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>左侧宽度固定,右侧宽度自适应</title><style>.container{padding-left 查看详情

css布局1:左右宽度固定中间自适应html布局解决方案(同一侧宽度固定,另一侧自适应)

...t/web/639884.html本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下:a.使用浮动布局html结构如下(为什么中间的网格宽度显示的和实际的不一样?怎么造成的;解决方法就是让中间的非浮动元素可以... 查看详情

双飞翼布局和圣杯布局解析

今天突然想起了温习一下css布局。之前看双飞翼布局只是粗略的看了一下,大概明白怎么做,但是并没有去延伸一下...还有它的孪生兄弟:圣杯布局。今天仔细的琢磨了一下;突然发现其实内容还不少的样子。双飞翼布局或者说... 查看详情

css如何实现”右部宽度固定,左部自适应“的布局

...mdash;—使用CSS实现左部自适应、右部固定宽度为200px的布局。当时第一眼看到题目时,以为只是一道很简单的题目。不就是定义两个左浮动的div,右部的宽度固定为200px,左部的宽度为100%,但是真的是那么简单吗?我当时信心... 查看详情

css两列布局,一边固定宽度,另一边自适应

<!DOCTYPEHTML><HTML>   <head>            <metacharset="utf-8"/>      &l 查看详情