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宽度自适应的更多相关文章

  1. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  2. CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  4. HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  5. CSS如何实现”右部宽度固定,左部自适应“的布局

    吃过晚饭后,开始刷前端笔试题,却遇到了一道CSS难题——使用CSS实现左部自适应.右部固定宽度为200px的布局.当时第一眼看到题目时,以为只是一道很简单的题目.不就是定义两个左浮动的div,右部的宽 ...

  6. 在页面布局中,CSS如何实现左侧宽度固定,右侧宽度自适应的布局?

    首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <div ...

  7. CSS+DIV 布局三种定位方式

    一.普通流 普通流中元素框的位置由元素在HTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 二.定位 1.相对定位 被看作普通流 ...

  8. css页面布局--三栏(两边固定中间自适应&两边自适应中间固定)

    http://www.cnblogs.com/zhanyishu/p/5656875.html

  9. CSS三列布局之左右宽度固定,中间元素自适应问题

    最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...

  10. 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应

    前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...

随机推荐

  1. 怎么在一个list集合里面筛选重复的数据,在重复的数据中取最后添加的那条数据

    1.先将集合进行分组(分组字段)2.在判断分组的数量是否大于 03.大于0,则有重复的数据

  2. [Tree]Binary Tree Inorder Traversal

    Total Accepted: 98729 Total Submissions: 261539 Difficulty: Medium Given a binary tree, return the i ...

  3. 图的最短路径问题————树上奶牛(tree.cpp)

    和往常一样,继续从题目引入 树上奶牛 (tree.cpp) [题目描述] 农夫John的奶牛不是住在地上而是住在树上的QWQ. 奶牛之间需要串门,不过在串门之前他们会向John询问距离的大小.可是Jo ...

  4. 如何在linux中设置tab键长度

    1. 创建文件名为 .vimrc 的系统文件 首先切换到用户根目录,然后创建文件. $ cd ~ $ vim .vimrc 2. 在文件中输入下面的内容并保存 set tabstop=4 set sh ...

  5. JSP(二)

    JSTL JSTL不仅可以实现EL所不能实现的逻辑循环或者条件判断,还有强大的定制标记. 使用JSTL 需要将两个文件("jstl.jar"和"standard.jar& ...

  6. dede调取文章内容的第一张图片

    dede调用文章第一张图片(非缩略图)的实现方法 这篇文章主要是介绍dede调用文章第一张图片的实现代码,需要的朋友可以参考下 需要进行两个操作 第一步,修改include/extend.func.p ...

  7. Android 截取本地图库图片 并显示

    package com.example.image; import android.app.Activity; import android.content.Intent; import androi ...

  8. MUD江湖_MUD文字游戏_MUD五指_武林群侠_北侠_夺宝江湖_书剑_文字江湖游戏_MUD游戏下载

    MUD江湖_MUD文字游戏_MUD五指_武林群侠_北侠_夺宝江湖_书剑_文字江湖游戏_MUD游戏下载  武侠类手机文字游戏,经典再现高度自由玩法宠物 自制装备 师徒自立门派 自造武功欢迎来玩 Q群 1 ...

  9. ctype.h 字符分类与转换

      函数及说明 1 int isalnum(int c)该函数检查传递的字符是否是字母数字. 2 int isalpha(int c)该函数是否传递的字符是字母. 3 int iscntrl(int ...

  10. Solaris-[ODBC-ORACLE WP Driver]遇到的几个问题

    确保之前已装好ORACLE和ODBC,ODBC连接数据库时会出现几个问题 一.登陆oracle并启动 [root@bunsol:/export]$su - oracle Oracle Corporat ...