方法一:

别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧。

HTML Markup

		<div id="container">
<div id="wrapper">
<div id="sidebar">Left Sidebar</div>
<div id="main">Main Content</div>
</div>
</div>

CSS Code

		<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: auto;
} body {
margin: 0;
padding: 0; } #container {
background: #ffe3a6;
} #wrapper {
display: inline-block;
border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/
position: relative;
vertical-align: bottom;
} #sidebar {
float: left;
width: 200px;
margin-left: -200px;/*==此值等于左边栏的宽度值==*/
position: relative;
} #main {
float: left;
} #maing,
#sidebar{
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>

查看在线DEMO

方法二

HTML Markup

		<div id="container">
<div id="left" class="aside">Left Sidebar</div>
<div id="content" class="section">Main Content</div>
</div>

CSS Code

		<style type="text/css">
*{margin: 0;padding: 0;}
#container {
overflow: hidden;
} #left {
background: #ccc;
float: left;
width: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px; } #content {
background: #eee;
margin-left: 200px;/*==此值等于左边栏的宽度值==*/
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>

查看在线的DEMO

方法三:

HTML Markup

		<div id="container">
<div id="content">Main Content</div>
<div id="sidebar">Left Sidebar</div>
</div>

CSS Code

			*{margin: 0;padding: 0;}
#container{
background-color:#0ff;
overflow:hidden;
padding-left:220px; /* 宽度大小等与边栏宽度大小*/
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/
margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
float:right;
}
#sidebar{
background-color:#f00;
width:220px;
float:right;
margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
}
#content,
#sidebar {
min-height: 200px;
height: auto !important;
height: 200px;
}

查看在线DEMO效果。

方法四:

HTML Markup

		<div id="container2">
<div id="container1">
<div id="col1">Left Sidebar</div>
<div id="col2">Main Content</div>
</div>
</div>

CSS Code

		*{padding: 0;margin:0;}
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
left: 220px;/* 宽度大小等与边栏宽度大小*/
} #col2 {
position: relative;
margin-right: 220px;/* 宽度大小等与边栏宽度大小*/
} #col1 {
width: 220px;
float: left;
position: relative;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
} #col1,#col2 {
min-height: 200px;
height: auto !important;
height: 200px;
}

查看在线DEMO

方法五:

HTML Markup

		<div id="container1">
<div id="container">
<div id="left">Left Sidebar</div>
<div id="content">
<div id="contentInner">Main Content</div>
</div>
</div>
</div>

CSS Code

		*{padding: 0;margin: 0;}
#container1 {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background-color: #dbddbb;
}
#container {
background-color: orange;
width: 100%;
float: left;
position: relative;
left: 220px;/* 宽度大小等与边栏宽度大小*/
}
#left {
float: left;
margin-right: -100%;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
width: 220px;
}
#content {
float: left;
width: 100%;
margin-left: -220px;/* 宽度大小等与边栏宽度大小*/
}
#contentInner {
margin-left: 220px;/* 宽度大小等与边栏宽度大小*/
overflow: hidden;
} #left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}

查看在线DEMO

针对上面的面试题要求,我一共使用了五种不同的方法来实现,经过测试都能在各浏览器中运行,最后我有几点需要特别提出:

  1. 上面所有DEMO中,要注意其方向性的配合,并且值要统一,如果您想尝试使用自己布局需要的宽度值,请对照相关代码环节进行修改;
  2. 上面所有DEMO中,没有设置他们之间的间距,如果您想让他们之间有一定的间距,有两种方法可能实现,其一在上面的DEMO基础上修改相关参数,其二,在相应的里面加上"div"标签,并设置其“padding”值,这样更安全,不至于打破你的布局
  3. 因为我们这里有一列使用了自适应宽度,在部分浏览器下,当浏览器屏幕拉至到一定的大小时,给我们带来的感觉是自适应宽度那栏内容像是被隐藏,在你的实际项目中最好能在“body”中加上一个“min-width”的设置。

CSS布局——左定宽度右自适应宽度并且等高布局的更多相关文章

  1. 布局:高度已知,布局一个三栏布局,左栏和右栏宽度为200px,中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

  2. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  3. css实现左栏固定右栏自适应,高度自适应的布局

    收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基 ...

  4. css布局:定宽,自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

  5. css为什么要定最小宽度和最大宽度,最小宽度和最大宽度有什么用

    设最小和最大宽度,主要是为了防止页面变形而已如,如果一个页面的宽度设置为百分比,这时此页面的宽度会根据浏览器的宽度而定但如果浏览器的宽度过小,页面就会变形,例如,你做的用百分比设置的页面,而用户端的浏 ...

  6. css靠左,靠右

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  8. CSS基础布局--居中对齐,左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  9. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

随机推荐

  1. Hackfive 使用TextSwitcher和ImageSwitcher实现平滑过渡

    1. 应用场景: 通过向左和向右的导航按钮浏览日期列表 在日期选择空间中改变日期 倒计时始终 新闻刚要 2.用到的知识点是:     TextSwitcher和ImageSwitcher     Te ...

  2. C# socket请求的名称有效 但是找不到请求的类型的数据

    程序以前在xp下运行一直良好,但将安装在win7下面却出现"请求的名称有效 但是找不到请求的类型的数据"错误,程序底层通信是基于socket,时间久了就会出现系统黑屏死机,但并不知 ...

  3. Unity5.5.2 CD旋转 顺时针逆时针

    UGUI 下  Sprite_CD  在Inspector下  Image(Script) 下  Clock wise  勾选  决定  CD是顺时针还是逆时针  默认是顺时针  勾选则为逆时针

  4. EFCore扩展Select方法(根据实体定制查询语句)

    EFCore扩展Select方法(根据实体定制查询语句)  通常用操作数据库的时候查询返回的字段是跟 我们的定义的实体是不一致的,所以往往针对UI或者接口层创建大量的Model, 而且需要手动对应字段 ...

  5. WinForm中获取Listbox、DataGridView等控件某行对应的数据

    Listbox:listbox.SelectedItem as XXX DataGridView:dataGridView1.Rows[i].Cells[1].Value.ToString()

  6. 转载:ResultMap和ResultType在使用中的区别

    在使用mybatis进行数据库连接操作时对于SQL语句返回结果的处理通常有两种方式,一种就是resultType另一种就是resultMap,下面说下我对这两者的认识和理解 resultType:当使 ...

  7. C# 抽象(2)

    接着上章说: 先看代码 abstract class Human { public abstract void Think(); public abstract int Age { get; set; ...

  8. Apple开启双重认证过程

    1.准备 1.1 AppleID账号.密码 1.2 打算用于接收开启双重认证的十一位手机号 1.3 AppleID账号密保问题 2.操作步骤: 2.1 打开设置 2.2 点击个人账户头像 注意:当前有 ...

  9. 查看Eclipse版本号的方法及各个版本区别 Eclipse选择标准

    这篇文章主要介绍了查看Eclipse版本号的方法及各个版本区别 Eclipse选择标准,方便初学者选择适合自己的版本,需要的朋友可以参考下 Eclipse 是一个开放源代码的.基于Java的可扩展开发 ...

  10. C# 在Winform设计一个耗时较久的任务在后台执行时的状态提示窗口

    很多时候,我们需要在窗体中执行一些耗时比较久的任务.比如:循环处理某些文件,发送某些消息等... 单纯的依靠状态栏,用户体验不佳,按下功能按钮后得不到有效的提醒,小白用户绝对会电话给你说“我点了以后就 ...