左边div固定宽度，右侧div固定的方式

最新推荐文章于 2022-11-14 15:02:44 发布
最新推荐文章于 2022-11-14 15:02:44 发布
阅读量219 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky_girl_girl/article/details/115008818
版权

1.父级div定位relative，子级右侧div position left：左边宽度，right：0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.container{
			position:relative;
			width:500px;
			height:500px;
			border:1px solid black;
		}
		.left{
			width:100px;
			height:100%;
			background-color: aqua;
		}
		.right{
			position:absolute;
			left:100px;
			top:0;
			right:0;
			height:100%;
			background-color: bisque;
		}
	</style>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

2.父级：display：flex；子级：flex：1；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.container{
			display:flex;
			width:500px;
			height:500px;
			border:1px solid black;
		}
		.left{
			width:100px;
			height:100%;
			background-color: aqua;
		}
		.right{
			flex:1;
			height:100%;
			background-color: bisque;
		}
	</style>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

3.calc（100%-左边宽度）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.container{
			width:500px;
			height:500px;
			border:1px solid black;
		}
		.left{
			float:left;
			width:100px;
			height:100%;
			background-color: aqua;
		}
		.right{
			width:calc(100% - 100px);
			height:100%;
			margin-left:100px;
			background-color: bisque;
		}
	</style>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>
lucky_girl_girl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
默认div宽度和高度
qq_41700374的博客
02-12 1万+
默认情况下任何元素标签都是有宽度css样式的。 一、认识div默认宽度 div默认的宽度多少？ 答案：默认宽度为100%，父级宽度多少它宽度就多少。 比如一个盒子宽度设置550px,里面一个div默认未设置宽度和未设置float，未设置padding等，在没有设置任何CSS属性情况下这个div宽度就是等于父级宽度550px。 比如一个html布局中，body默认宽度是100%...
实现三个并排div，两边固定宽度，中间自适应的四个方法
dupeidong1215的博客
04-08 2万+
个人整理的实现三个并排div，两边固定宽度，中间自适应的四个方法，废话不多说，先上代码，可以直接复制看效果。 Document html,body{width:100%;height:100%;margin:0;padding:0;} .cf:after{content:"";display:block;height:0;clear:both;} .
css+div页面布局之2-- 固定宽度
wangjingyi
01-22 225
[code="html"] header 1) Content here. 2) right part here. 3) left part here. footer [/code] 1:2:1固定宽度布局： [code="css"] body {text-align:center;display:bl...
一个div宽度或高度固定，另一个div铺满剩余空间
转身
08-18 2131
一. 一个div宽度固定，实现如下效果： box1固定宽度200px; box2铺满页面剩余部分 <div class="wrapper"> <div class="box1"></div> <div class="box2"></div> </div> 1. 利用flex布局 .wrapper { display: flex; } .box1 { width: 200px; height: 200px
【CSS】一个div宽度或高度固定，另一个div铺满剩余空间
qing_小诺的博客
08-30 1万+
如果我们想实现下图的效果（一行中放两个div，左边的一个div宽度固定，右边的div横向铺满）： 首先我们先写三个div：父div包裹两个div。 <body> <div class="content"> <div class="left">left</div> <div class="righ...
两个div左边的固定宽度右边的自动填充的css
09-25
想实现这样的一个效果两个div左边的宽度固定、右边的自动填满，实现方法很简单，下面为大家简单介绍下，感兴趣的朋友可以参考下
让DIV一直固定在屏幕的某个位置示例代码
09-25
` - 这些值决定了`<div>`距离屏幕底部和右边的距离，使得它固定在屏幕的右下角。 5. `border: 8px double #06F867;` - 定义了一个8像素宽的双线边框，颜色为#06F867。 6. `text-align: center;` - 使`<div>`内部的...
两侧列固定中间列变宽Div布局示例
09-25
- `#content`：主要内容区域，它的右边距设置为200像素（与`#navi`的宽度相同），左边距也为200像素（与`#side`的宽度相同）。这样，`#content`就会在`#navi`和`#side`之间，并且随着内容的增加而自动变宽。 - `#...
vue中实现拖动调整左右两侧div的宽度的示例代码
01-19
还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue 拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们...
Div+CSS创建固定宽度布局
计忆
04-03 3075
用 XHTML 和 CSS 实现两列或三列页面布局的各个方面。到目前为止，所有例子都使用流式布局（也就是布局会自动扩展和适应浏览器窗口的宽度）。现在是时候考虑另外一种主要的页面布局方法了，这种布局方法是固定宽度布局。很多 Web 构建人员倾向于使用固定宽度的布局进行页面设计，因为它们能生成精确且可预知的结果。这种方法与打印布局非常接近，对于设计人员和访问者来说都是一个很重 要的舒适因素；另外，
div固定悬浮（左侧、右侧、任意相对位置）
城北荆无命的博客
06-21 4612
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
DIV左右布局（右侧定宽，左侧自适应宽）（转）
weixin_30477293的博客
04-27 646
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=...
【css基础】实现左边div固定宽度 右边div自适应撑满剩下的宽度
hzxOnlineOk的博客
11-14 2548
简单来说，实现布局最好的方式是 flex，简单兼容现代浏览器和机型。当然，我是因为还没有学 grid（但 grid 要记得参数比较多）。绝对定位和浮动各有优缺点float 区别于其他三种，不需要父元素做容器grid 区别于其他三种，不需要设置子元素（左元素的）宽绝对定位区别于其他三种，它的方法不仅要父元素有高，其子元素也要有高flex 最简单。
html 固定div宽度自适应宽度,div自适应宽度_html/css_WEB-ITnose
weixin_35513122的博客
07-15 863
对于div自适应宽度，网上的说法基本上都是将要自适应宽度的div放在其它固定宽度的最后，不指定其float属性或将float属性指定为none，比如三栏布局居中的一栏为自适应宽度，就可以这样来定义三栏div：这是左栏这是右栏这是中栏，且自适应宽度效果如下：但是如果我们增加中栏的文字内容，并且为其添加边框和背景色，就会发现问题了：这是左栏这是右栏这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中...
html div宽 高固定,固定宽高的DIV如何绝对居中固
weixin_42309866的博客
06-25 1247
宽度高度不固定的div 如何水平居中以及垂直居中让一个固定长宽的DIV在不同分辨率下都水平居中margin:0 auto居中了但是没有长宽。 设置了长宽居中又无效了。。夜影驱动编程小编今天和大家分享大神div{ width:800px; height:2000px; margin:0 auto; background-color:#FFC;}div有了宽度和高度，居中就是用margin:0 aut...
html div位于上个元素右边,css如何控制某一个div始终位于页面右侧？
weixin_30588427的博客
07-04 4862
实例：实现css如何控制某一个div始终位于页面右侧1、首先打开DW软件，然后设置一个css样式，引用到div中如图所示2、打开刚刚新建的html文件，用浏览器打开观看效果如图：详解：实现此类固定某一个区域主要应用于：position:fixed;绝对定位：控制div right:1%；与右侧距离为1%； top:20%； 头部距离20%；然后滑动右侧滚动条，会发现，div区域始终固定在一个位置...
DIV 左右布局方案
热门推荐
又言又语
03-01 7万+
DIV 左右布局方案
实现一个div，左边固定div宽度200px，右边div自适应
xiaobing_hope的专栏
11-01 1万+
实现一个div，左边固定div宽度200px，右边div自适应<div class= "container"> <div class="left"></div> <div class="rigth"></div> </div><style> /*方法一： BFC(块级格式化上下文)*/ .container{ width:10
div下左边div固定,右边div分配剩下的
最新发布
08-24
你可以使用CSS中的flex布局实现这个需求。具体实现步骤如下： 1. 给外层div添加display:flex;属性，开启flex布局。 2. 给左边的div设置固定宽度，比如200px，同时给右边的div设置flex:1;属性，表示占据剩余的空间。 代码示例： ``` <div style="display:flex;"> <div style="width:200px;">左边的div</div> <div style="flex:1;">右边的div</div> </div> ``` 通过上述代码，左边的div宽度为200px，右边的div会自动分配剩余的宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值