左边固定,右边自适应(解决方案)

方法一

html代码:

1 <div class="container clearfix">
2   <div class="left"></div>
3   <div class="right"></div>
4 </div>

css代码:

 1 .left {
 2   background-color: #7ccd7c;
 3   height: 200px;
 4   float: left;/*主要看这里*/
 5 }
 6  .right {
 7   background-color: #000080;
 8   height: 200px;
 9   overflow: hidden;/*主要看这里*/
10 } 

方法二

未完。。。

				
时间: 2024-08-11 06:47:43

左边固定,右边自适应(解决方案)的相关文章

解决左边固定右边自适应宽度的方案

上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题,当然,这个问题我也在百度中搜索过,基本搜索出来的答案都是这样描述的,我也在上一篇文章中提出过浮动和绝对定位属于脱离文档流布局,是会损耗性能的,但是百度中却没有给出我所想表达出的解决方案,所以不得不在此将该方案具体的描述清楚. 首先,我需要介绍的是display:box这个属性,它是今天弹性布局的主角,虽然它有个更加强大的弟弟display

div css左边固定右边自适应布局

web前端开发之布局:先看效果图,最简单的左右布局.有可能还会被面试问道哈哈哈.一看也没什么特别之处,就是左边固定,右边自适应,就这么简单. 原理:通过设置一个margin-left;或者margin-right就可以搞定.方法有很多,这次就只介绍这种设置margin的. 代码: <!doctype html> <html>  <head>   <meta charset="UTF-8">   <title>Document&

左边固定右边自适应的布局

下方内容可直接copy查看效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } .left{ width: 80px; heigh

左边固定右边自适应的等高布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0; padding: 0; } #left { float: left; width: 220px; margin-right: -100%; } #content {flo

双栏布局 左边固定右边自适应

<!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" xml:lang="en"> <head> <meta h

左边宽度固定右边自适应

在写页面布局的时候经常要用到左边宽度固定右边自适应 第一种写法: .left { position: absolute; height: 100%; width: 300px; background-color: blue; } .right { height: 100%; margin-left: 300px; background-color: red; } 这种写法有个问题,right的宽度是占满整个屏幕,如果right想实现拖拽功能,发现拖拽到左边300像素的时候,不能在往往左边拖拽了,

HTML布局之左右结构,左边固定右边跟据父元素自适应

HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管理系统左侧菜单,右侧内容.?1. [文件] layout_float_bfc.html <!doctype html><html lang="en"><head>    <meta charset="UTF-8">   

flex左右布局 左边固定 右侧自适应

flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: <div class="item"> <div class="l">LEFT</div> <div class="r"> <div class="title">OMG OMG

左固定右边自适应

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .left{ height: 300px; width: 200px; background: red; float: left; /*opacity: 0.5;*/ } .right{ height

如何布局左固定右边自适应的两列布局?

一,左侧div,float设为left,右侧div设置margin-left属性为左侧div的宽度,外div清除浮动 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style type="text