`
我不是风
  • 浏览: 1409 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

【css布局】右侧固定宽度,左侧自适应布局

    博客分类:
  • css
 
阅读更多

简单的需求,左侧自适应布局,右侧固定宽度360px。

三种方法实现:

1. 右栏float:right、左栏margin-right:360px;

注意:左栏要写在右栏后面

2. 左右栏都绝对定位、左栏margin-right:360px;

1、2缺点在于底部不能对齐,但是兼容所有浏览器。

3. 弹性盒布局、外层元素display:box、左侧元素:box-flex:1;

缺点在于兼容性,使用css3 盒布局,对于ie9以下浏览器无法正常显示

 

测试地址:http://iamnotfeng.duapp.com/css_layout/2columns-1.html

 

 

 

 

分享到:
评论

相关推荐

    css实现右侧固定宽度 左侧宽度自适应

    主要介绍了css实现右侧固定宽度 左侧宽度自适应,这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧...

    左侧固定宽度,右侧自适应宽度的CSS布局

    一边固定宽度,另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中,几乎都会用到。

    懒人原生固定侧栏宽度自适应全屏页面布局

    我们经常能看到一些网站的后台管理系统,左侧竖导航往往都是一个固定的大小,右侧是一个自适应的div,无论你的浏览器多宽,右侧部分使用可以撑满剩下部分。记得09年之前,很多都是用一个大的table来实现,其实不然...

    HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

    HTML实现2列布局,左侧宽度固定,右侧自适应 实现一: <style> body, html{padding:0; margin:0;} // 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-...

    左定宽度右自适应宽度并且等高布局实现代码

    今天有位朋友一早转来一个有关于CSS布局的面试题,需要解决,花了点时间写...左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了; 左右两列

    CSS布局实例代码 两列布局实例

    CSS两列布局,右侧固定,左侧自适应宽度.

    左右两栏布局右侧自适应+左右拖动改变两栏宽度

    布局很简单,左边一个div,右边一个div,中间的div是用来拖动的。 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head...

    css实现三栏布局的几种方法及优缺点

    三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局:高度已知,其中左栏、右栏宽度各为...

    css 多列布局解决方案

    一. 定宽 + 自适应 期望效果: 左侧宽度固定, 右侧宽度自适应 公共代码: html: <p>left menu <li>right item1 <li>right item2 <li>right item3 css: html, body, p, ul, li { margin: 0

    div+css有实例,易学易懂

    div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...

    微信小程序通过js实现瀑布流布局详解

    瀑布流 – 小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接。如下图: 瀑布流的两种做法: css: 在父元素上使用column-count: 2也可以做到两列排版。但column-count:...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 弹出窗口 254 实例202 弹出指定尺寸的无边框窗口 254 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 弹出窗口 254 实例202 弹出指定尺寸的无边框窗口 254 ...

    ExtAspNet_v2.3.2_dll

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

Global site tag (gtag.js) - Google Analytics