如何用纯CSS布局两列,一列固定宽度,另一列自适应?

大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题。一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题。下面是我的一些小经验,疏漏之处还望大家体谅。

如果不用纯CSS解决此问题的话,我们可以先固定左侧DIV宽度为:100px,然后用JS取得当前浏览器宽度,再减去100px,然后赋值给右侧DIV宽度即可。这样就愉快的解决了,右侧的宽度就是自适应的了。

当然如果不是固定左侧DIV宽度为:100px的话,我们也可以用百分比设置左右侧DIV的宽度,也是自适应的。

那究竟该如何用CSS来解决这个问题呢?

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

CSS position 属性:

static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

        relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
        absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
        fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
        关于浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。关于负边距的介绍在 http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 里有非常详细的介绍。下面是三种用CSS解决这个问题的方法,第一种是用绝对定位实现的,第二种是用浮动来实现的,第三种是用负边距来实现的。以下是具体代码和显示效果:
 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="utf-8">
 6         <title></title>
 7     </head>
 8
 9     <body>
10         <!--1.用绝对定位布局示例-->
11         <div style="width: 100px;height: 100px;background-color: red;position: absolute;">左侧宽度100px</div>
12         <div style="width: auto; height: 100px;background-color:blue;">*******右侧宽度自适应*******</div>
13         <div style="width: 100px;height: 100px;background-color: grey;position: absolute;">左侧宽度100px</div>
14         <div style="width: auto; height: 100px;background-color:yellow;margin-left:100px ;">*******右侧宽度自适应*******</div>
15         <!--2.用 浮动 布局示例-->
16         <div style="width: 100px;height: 100px;background-color: yellowgreen;float: left;">左侧宽度100px</div>
17         <div style="width: auto; height: 100px;background-color:lightgrey;">*******右侧宽度自适应*******</div>
18         <!-- 3.利用负边距布局示例-->
19         <div style="width:100px;height:100px;background-color:brown;position:relative;float:left;margin-right:-100px;">左侧宽度100px
20         </div>
21         <div style="float:right;width:100%;height: 100px;">
22             <div style="margin-left:100px;height:100px;background-color: wheat;">
23                 *******右侧宽度自适应*******
24             </div>
25         </div>
26     </body>
27
28 </html>

由以上实现可以看出,在用绝对定位时,由于其在文档流中已经不存在,那么我们就很容易理解为什么第一实例里面的右侧DIV被左侧DIV遮挡了。所以,绝对定位时要注意设置margin值。

时间: 2024-11-05 17:33:35

如何用纯CSS布局两列,一列固定宽度,另一列自适应?的相关文章

教你如何用纯CSS写Tab切换

说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单选框原理 该方法大致原理如下: 当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式. 具体如何实现呢?请耐心往下看... 1. HTML结构 <!--HTML--> &l

CSS布局 两列布局之单列定宽,单列自适应布局思路

前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, flex, grid 这几个布局方式来实现这种效果 float [float + margin] 将定宽的一列使用float,而自适应的一列使用计算后的margin <style> .f1 .parent{overflow: hidden;zoom: 1;} // 触发bfc和haslayout来闭合

关于纯css布局的概况

用一些常用的手法来表现感情或者论证问题,这在XHTML中就是用特定的元素来完成一些常见的信息组织.下面就是信息组织形式与元素的对应列表. img 作为内容的图片是一定要放到img里面的,这没有更好的选择了.然而如果图片不是作为内容,而是作为修饰性的,则千万不要用img.对于非内容的图片,应该在CSS中引用,而不在XHTML中出现.例如每一个导航链接有一个前导的箭头指示,那么这些箭头就应该通过CSS的background-image属性加上去,而不是直接作为img出现. a 这也是一个非常准确定义

css布局: 两栏 自适应高度

只使用css实现 有两种方式, 一种是通过相对定位,再绝对定位获取父亲元素的高度, 一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6

如何用纯 CSS 创作一种侧立图书的特效

效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deVgRM 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/cb6pkUE 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/front-end-dail

如何用纯 CSS 创作一个充电 loader 特效

效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/cvrwJAK 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/front-end-dail

如何用纯 CSS 创作一个 3D 文字跑马灯特效

效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/cWknNUR 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/front-end-dail

如何用纯 CSS 创作一个荧光脉冲 loader 特效

效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/cwrJys7 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/front-end-dail

如何用纯 CSS 创作一种文字断开的交互特效

效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/LmjNgL 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/c2EvWHN 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/front-end-dail