简单的需求,左侧自适应布局,右侧固定宽度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实现右侧固定宽度 左侧宽度自适应,这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧...
一边固定宽度,另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中,几乎都会用到。
我们经常能看到一些网站的后台管理系统,左侧竖导航往往都是一个固定的大小,右侧是一个自适应的div,无论你的浏览器多宽,右侧部分使用可以撑满剩下部分。记得09年之前,很多都是用一个大的table来实现,其实不然...
HTML实现2列布局,左侧宽度固定,右侧自适应 实现一: <style> body, html{padding:0; margin:0;} // 根据CSS定位,利用浮动或绝对定位,使左侧的块元素脱离常规文档流,可以与右边块元素并列 div:nth-of-...
今天有位朋友一早转来一个有关于CSS布局的面试题,需要解决,花了点时间写...左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了; 左右两列
CSS两列布局,右侧固定,左侧自适应宽度.
布局很简单,左边一个div,右边一个div,中间的div是用来拖动的。 复制代码代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <html> <head...
三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局:高度已知,其中左栏、右栏宽度各为...
一. 定宽 + 自适应 期望效果: 左侧宽度固定, 右侧宽度自适应 公共代码: html: <p>left menu <li>right item1 <li>right item2 <li>right item3 css: html, body, p, ul, li { margin: 0
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 标准...
瀑布流 – 小程序中数据列表或者图片展示难免高度不一,而我们一般固定宽度,让其高度自适应,并无缝对接。如下图: 瀑布流的两种做法: css: 在父元素上使用column-count: 2也可以做到两列排版。但column-count:...
实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 弹出窗口 254 实例202 弹出指定尺寸的无边框窗口 254 ...
实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 弹出窗口 254 实例202 弹出指定尺寸的无边框窗口 254 ...
-修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...