xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应。
和大家分享一个实现方式:
1.html代码
<div class="dyleft">左栏固定宽度为200px</div>
<div class="dyright">右栏固定宽度为200px</div>
<div class="dycenter">中间自适应宽度</div>
2.css代码
body{
font-size:12px;
margin:;
}
.dyleft{
float:left;
width:200px;
}
.dyright{
float:right;
width:200px;
}
.dycenter{
margin:0 210px;
}
div{
border: dotted 1px green
}
xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应的更多相关文章
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- CSS如何实现”右部宽度固定,左部自适应“的布局
吃过晚饭后,开始刷前端笔试题,却遇到了一道CSS难题——使用CSS实现左部自适应.右部固定宽度为200px的布局.当时第一眼看到题目时,以为只是一道很简单的题目.不就是定义两个左浮动的div,右部的宽 ...
- 在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?
首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...
- CSS+DIV 布局三种定位方式
一.普通流 普通流中元素框的位置由元素在HTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 二.定位 1.相对定位 被看作普通流 ...
- css页面布局--三栏(两边固定中间自适应&两边自适应中间固定)
http://www.cnblogs.com/zhanyishu/p/5656875.html
- CSS三列布局之左右宽度固定,中间元素自适应问题
最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
随机推荐
- 教你如何理解SQL
1. SQL 是一种声明式语言 首先要把这个概念记在脑中:“声明”. SQL 语言是为计算机声明了一个你想从原始数据中获得什么样的结果的一个范例,而不是告诉计算机如何能够得到结果.这是不是很棒? (译 ...
- Linux挂载硬盘出错:$LogFile indicates unclean shutdown (0, 0)
前一次还挂载好好的,今天在挂载NTFS的分区就不行了,出现如下错误信息和提示: $LogFile indicates unclean shutdown (0, 0) Mount is denied b ...
- codevs1127
学校里有一个水房,水房里一共装有m 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为1. 现在有n 名同学准备接水,他们的初始接水顺序已经确定.将这些同学按接水顺序从1到n 编号,i 号同学的 ...
- Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
什么是Three.js three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包 ...
- hql中or的用法(代替union)
hql中不支持union和unionAll关键字因为在查询出的结果集中无法进行排序.代替union起到相同作用的 是or关键字.在构造hql时考虑使用or代替union产生多个结果集的组合. 详解如下 ...
- JavaScript基本概念(变量和数据类型)
1. 变量 在局部作用域中省略var操作符可以定义全局变量,但是这么做会导致该变量难以维护,且在严格模式下会导致抛出ReferenceError错误. 2. 数据类型(js共用6种数据类型,分别是 U ...
- 用include()和ob_get_contents( )方法 生成静态文件
1. 生成静态文件可以在打开缓冲区的前提下,用include()方法去包含要执行的动态文件,这样该动态文件就会在缓冲区中执行,执行完毕后的静态HTML代码就保存在缓冲区中,然后用ob_get_cont ...
- eclipse android sdk javadoc
sdk 的函数不提示帮助信息 查了下是现在adt版本没有doc文件夹,拷贝了早期的版本docs过来 其他具体操作如下:http://blog.csdn.net/lyh7736362/article/d ...
- .NET日志工具介绍
最近项目需要一个日志工具来跟踪程序便于调试和测试,为此研究了一下.NET日志工具,本文介绍了一些主流的日志框架并进行了对比.发表出来与大家分享. 综述 所谓日志(这里指程序日志)就是用于记录程序执行过 ...
- css案例学习之全局声明*{} 与body{}的区别
代码 <html> <head> <title>全局声明</title> <style type="text/css"> ...