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

最新推荐文章于 2021-05-30 19:01:43 发布
最新推荐文章于 2021-05-30 19:01:43 发布
阅读量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%...
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
热门推荐
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
左边div固定宽度，右边div宽度自适应
ForMyQianDuan的博客
05-17 1482
http://www.zhihu.com/question/37208845 body{ padding: 0px; margin: 0px; } .wrap{ width: 100%; height:500px; background:red; }
左边div固定宽度，右边div自适应撑满剩下的宽度
YinXiaobo
05-24 3678
1. 使用float &lt;div class="use-float"&gt; &lt;div class="left"&gt;&lt;/div&gt; &lt;div class="right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;style&gt; .left {
两个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并排，左边div固定宽度，右边宽度自适应
飞天代码的博客
11-23 6610
在地铁上无聊看到一个面试帖子，“俩个div并排，左边div固定宽度，右边宽度自适应”，至少列出4种。 嗡，写了这么多年代码，竟然只能列出2种。回来还是写几个例子验证下。 方式一：BFC(块级格式化上下文) 思路：左边定宽，右边采用 overflow: hidden; /* 触发bfc */ 代码： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&a
div固定在页面左边
07-27
绝对支持IE6 IE7 IE8 和 FF的div层在页面左边固定不动，右边的div层超过页面高度正常滚动。
html中有关如何固定div大小的问题
程序员小周的博客
09-04 6749
div的属性中有width和length两条属性，不过这两条属性规定的是div内部的内容宽度以及高度，并不是div的大小，ex如果设置wid为300，len为300，此时如果设置padding-left为100，那么div的总宽度就变成了400。那么如何设置div大小恒定呢？可以设置两个div，一个用作承载，设置wid和len,第二个div则是承接内容，这样就OK啦！
css左侧 div给固定宽 右侧div自适应
Mr_wuying的博客
11-25 373
<div class="left"> 左 </div> <div class="right"> 右 </div> 第一种 浮动 .left{ width: 200px; float: left; height: 200px; background: #0000FF; } .right{ margin-left: 200px; height: 200px; background: #00FF00; } 弟二种 计算.
左边宽度固定，右边自适应
LuckXinXin的博客
05-24 983
左侧固定宽度，右侧自适应宽度的两列布局实现 html结构 <div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div> </div> 在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度 方法1：左侧div设置成浮动：flo...
css 实现左侧固定 右边自适应
杨前露的博客
12-13 1万+
像下面这张图，文字在左 文本框在右，刚开始的时候我用百分比设置的，这样会有一个问题，就是文字与文本框之间的间距也要用百分比，这样当浏览器窗口比较宽的时候，会使文字与文本之间间距太大。结果交不了差….于是乎，就想到左侧的文字宽度固定，右侧自适应就解决问题啦，废话不多说，代码说明一切！ 左侧固定 右边自适应 布局1：<div class="container"> <span
两个div,一个在页面左边固定，另外一个自适应
xiaoxiaoluckylucky的博客
07-06 4387
直接上代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
div左边固定宽度，右边自适应宽度
weixin_30699463的博客
02-13 352
样式： <style type="text/css"> 　　html,body { height: 100%; padding: 0; margin: 0; } 　　.outer { height: 100%; box-sizing: border-box ; position: relative; } 　　.A { height: 100px; background: ...
div始终在页面的右边
zhaofuqiangmycomm的博客
09-05 1万+
方法一： .div1{ position:absolute; right:0; top:30%; height:50px; width:50px; background:red; } 方法二： float:right;
html div 边框只显示右侧,div 边框原来有这么多种设置方法
weixin_39538847的博客
05-30 5120
在HTML前端斥地中，有数次会对配置边框。这里给DIV加一个边框方式教程，实现div边框款式。经由CSS border花样属性实现加边框。如下是各类给DIV加分歧边框实例与才具教程、html代码。一、div加四边加边框1、用到css单词与值border:1pxsolid#F00设置对象边框为红色边框2、div残破小实例实例代码：html>www.CSS5.com.cn.a-4{bord...
div下左边div固定,右边div分配剩下的
最新发布
08-24
这样，左边div会固定在左侧，而右边div会自动填充剩余的空间，实现了div下左边div固定，右边div分配剩下的空间的效果。 注意，如果父div的宽度不是确定的，或者有其他元素影响了宽度的计算，可能需要根据实际情况...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值