xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应

xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应。

和大家分享一个实现方式:

1.html代码

1 <div class="dyleft">左栏固定宽度为200px</div>
2 <div class="dyright">右栏固定宽度为200px</div>
3 <div class="dycenter">中间自适应宽度</div>

2.css代码

 1 body{
 2     font-size:12px;
 3     margin:0;
 4 }
 5 .dyleft{
 6     float:left;
 7     width:200px;
 8 }
 9 .dyright{
10     float:right;
11     width:200px;
12 }
13 .dycenter{
14     margin:0 210px;
15 }
16 div{
17     border: dotted 1px green
18 }

xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应

时间: 2024-10-23 03:58:27

xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应的相关文章

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

方案一:利用padding-left预留空间,左侧脱标,右侧宽度相当于父元素的100% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧宽度固定,右侧宽度自适应</title> <style> .container{ padding-left: 300px; width: 100%; he

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

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0

三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link rel="stylesheet" type="text/css" href="task0001.css"> </head> <body> <div class="wrap"> <di

css布局1:左右宽度固定中间自适应html布局解决方案(同一侧宽度固定,另一侧自适应)

https://www.jb51.net/web/639884.html 本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下(为什么中间的网格宽度显示的和实际的不一样?怎么造成的;解决方法就是让中间的非浮动元素可以看到两边的浮动元素,例如为.center加overflow:hidden) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="box&quo

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

吃过晚饭后,开始刷前端笔试题,却遇到了一道CSS难题——使用CSS实现左部自适应.右部固定宽度为200px的布局.当时第一眼看到题目时,以为只是一道很简单的题目.不就是定义两个左浮动的div,右部的宽度固定为200px,左部的宽度为100%,但是真的是那么简单吗?我当时信心十足的以为真的就是这么简单的!看来,自信真的是来源于无知啊!于是马上切换到sublime开始编码了.当时,写好的第一个版本大概如下: <!DOCTYPE html> <html lang="en"&

三列布局,左右宽度固定,中间宽度自适应变化---普通格式和双飞翼格式

两种做法. 做法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } #left { width: 100px; float: left; background: green; height: 300px; } #right { width: 100px; float: right; backgro

使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原

(转转转)使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于CSS3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法 绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin

CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime;} #right { float: right; width: 200px; background: lime;} #center { margin:0 200px; background: blue} html: <div id="left">left</div>

CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的