html两栏 自适应布局,CSS 实现：两栏布局（一边固定，一边自适应）

☊【实现要求】：CSS实现左边固定，右边自适应父容器宽度的两栏布局。

√【实现】：

// html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式(margin:0; padding:0)

html,body {

/*width: 100%;*/

height: 100%; // html,body 默认高度为 0

margin: 0;

padding: 0;

}

.left {

width: 200px;

height: 100%;// 撑满整个页面高度

float: left;// 左边浮动

background: orange;

}

.main {

height: 100%;// 撑满整个页面高度

margin-left: 200px;//距左边距200px

background: green;

}

♫ 注意： 如果浮动非替换元素，则要指明一个明确的宽度；否则，它们会尽可能地窄。

假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

实现效果：

☊【实现要求】： CSS实现右侧宽度为200px，左侧自动扩展的两栏布局。

√【实现】：

body, html {

height: 100%;

/*width: 100%;*/

margin: 0;

padding: 0;

}

.main {

height: 100%;

margin-right: 200px;

background: green;

}

.right {

width: 200px;

height: 100%;

float: right;

background: orange;

}

☊【实现要求】：两栏布局，左边固定，右边自适应

√【实现】：

① float 布局

.demo3 {

.col-1 {

width: 150px;

float: left;// 脱离文档流

}

.col-2 {

// 不需要设置 margin-left, float会形成包围文字效果，虽然col-2的左边部分被col-1覆盖

}

}

如果设置 margin-left: 170px; 则 col-2 会向右偏移:

给 col-2 添加 overflow: hidden;，则不需要设置 margin-left，自动偏右：

② position: absolute; 左边元素相对于父元素绝对定位

*float 和 position:absolute; 都脱离文档流

.demo3 {

position: relative;// 定位父元素

.col-1 {

width: 150px;

position: absolute;// 脱离文档流

}

.col-2 {

margin-left: 150px;// absolute不会形成文字环绕效果，因此col-2会向上浮,

// 左边部分(包括文字)会隐藏在col-1下面，需要设置 margin-left

}

}

若 col-2 不设置 margin-left:

设置 margin-left 后：

注意：这种情况下，对 col-2 使用 overflow: hidden 不起作用，只能通过偏移量来进行定位

③ flex 布局

.demo3 {

display: flex;

display: -webkit-flex;

.col-1 {

width: 150px;

}

.col-2 {

flex: 1;// flex:1; 自动撑满剩余宽度

-webkit-flex: 1;

}

}

css 关于两栏布局，左边固定，右边自适应

好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

CSS实现两栏布局

写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...

css实现两栏布局，左侧固定宽，右侧自适应的7中方法

一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

css的两栏布局

经典的实现左边固定宽度,右边宽度自适应的几种方法 利用float和margin-left属性(margin-left的值可以稍稍大于或者等于.left的宽度) .left{ width: 30px; ...

CSS 实现左侧固定，右侧自适应两栏布局的方法

"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

七种CSS左侧固定,右侧自适应两栏布局

一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应

分享非常有用的Java程序 (关键代码)(六)---解析/读取XML 文件(重要)

原文:分享非常有用的Java程序 (关键代码)(六)---解析/读取XML 文件(重要) XML文件 <?xml version="1.0"?>

爬取知名社区技术文章&lowbar;setting&lowbar;5

# -*- coding: utf-8 -*- # Scrapy settings for JobBole project # # For simplicity, this file contains ...

HDU 4549 M斐波那契数列(矩阵快速幂)

题目链接:M斐波那契数列 题意:$F[0]=a,F[1]=b,F[n]=F[n-1]*F[n-2]$.给定$a,b,n$,求$F[n]$. 题解:暴力打表后发现$ F[n]=a^{fib(n-1)} ...

Android2&period;3系统 自定义的PopupWindow在实例化时报空指针异常

情况:是这样的,前段时间做了一个自定义的PopupWindow,就是写一个类,然后继承PopupWindow,别的什么操作都没有,但是在实例化的时候,在2.3系统中直接就报空指针异常(4.0及以上系统 ...

VC 任务栏图标闪烁

像QQ来消息时的,图标闪烁效果 将如下代码添加到Timer响应函数中 ) {// 任务栏图标闪烁 if (this != GetForegroundWindow()) { this-> ...