how2j.cn


步骤 1 :

左侧固定,右边自动占满

运行效果
<style> .left{ width:200px; float:left; background-color:pink } .right{ overflow:hidden; background-color:lightskyblue; } </style> <div class="left">左边固定宽度</div> <div class="right">右边自动填满</div>
<style>
 .left{
   width:200px;
   float:left;
   background-color:pink
  }
  .right{
    overflow:hidden;
    background-color:lightskyblue;
  }
</style>

<div class="left">左边固定宽度</div>

<div class="right">右边自动填满</div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-08-01 overflow:hidden;
a38733045
为什么这一行代码可以让右边的块刚好补满剩下的位置。




1 个答案

how2j 答案时间:2017-08-02
overflow:hidden的作用并不是刚好补满剩下的,把这个去掉,也可以观察到补满剩下的效果。 补满剩下效果是float:left做到的,.right会自动补满剩下的。 那么overflow:hidden有什么用呢? 它的用途是清除浮动. 我做了个例子: http://how2j.cn/code/208 这里把overflow:hidden去掉,并且把.right的高度增加,就会看到.right会包围.left。 所以需要加上overflow:hidden




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-07-25 不太了解这里为什么要清楚浮动。
年华似水



我这里没有清除浮动 效果一样啊。
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#d1{
			width:180px;
			background-color:pink;
			float:left;
		}
		#d2{
			background-color:blue;
		}
	</style>
</head>
<body>
<div id="d1">左边固定宽度</div>
<div id="d2">右边自动填满</div>
</body>
</html>

							


2 个答案

18063 答案时间:2018-05-06
因为若是右边高度大于左边,填充背景色可以清楚观察到右边的背景溢到了左边,overflow字面理解就是溢出当前浮动的,hidden就是隐藏

how2j 答案时间:2017-07-26
这里并没有用到清除浮动的clear啊?




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到









提问之前请登陆
关于 前端部分-CSS-左侧固定 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图