html div 宽度随着浏览器自动适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#a1
{
width: 100px;
height: 100px;
float: left;
background-color: Yellow;
}
#a3
{
width: 100px;
height: 100px;
float: right;
background-color: Blue;
}
#a2
{
width: auto;
margin:0 100px;
height: 100px;

background-color: Green;
}
#all
{
min-width:370px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="all" style="width: 100%">
<div id="a3">
a3
</div>
<div id="a1">
a1
</div>
<div id="a2">
a2546464564646465ty
</div>
</div>
</form>
</body>
</html>

时间: 2024-10-13 15:23:19

html div 宽度随着浏览器自动适应的相关文章

div 导航自适应浏览器宽度

<!DOCTYPE html> <html> <head> <title>自适应宽度</title> <style> #condition{float:left; text-align:center; } #condition ul{margin-top:0px; display:inline-block; } #condition ul li{ float:left; list-style:none; } </style>

转载:CSS里面div宽度的问题

转自http://www.lyblog.net/detail/286.html 小天地,大世界[http://www.lyblog.net] 从刚开始接触CSS到现在,一般用的单位都是像素这种绝对的单位.简单方便,而且还不容易出现一些莫名其妙的问题.优点听起来不错,缺点也还是很多的,比 如说:页面缺乏灵活性,自适应性不强······ 那么有什么好的解决方法吗?有,不过咱还是把范围缩小,就放在width:100%个这相对单位上来看看. 理论篇 width:100%的相对于谁 想必学过CSS,了解了

CSS控制div宽度最大宽度/高度和最小宽度/高度

在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟大家分享下css3样式代码,经过时间完全兼容各大主流浏览器. * 最小寬度 */ .min_width{min-width:300px;   /* sets max-width for IE */   _width:expression(document.body.clientWidth < 300

css解决div的各种浏览器兼容性问题

方法一: 1 min-height:500px;/*解决ie8.9.ff.chromet*/ 2 height:100%;/*解决ie6.7*/ 3 _height:500px;/*解决ie6超出自动溢出*/ 方法二: 1 min-height:400px;/*解决ie8.9.ff.chrome*/ 2 *+height:100%;/*解决ie7*/ 3 _height:400px;/*解决ie6超出自动溢出*/  方法三: 1 min-height:400px; height:auto!imp

chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是在写账号登录页面时,input表单添加了背景图片,当自动填充,搓搓的一坨淡黄色背景出来. 这个原因是我草率的直接设置在input元素里面,结果问题就来了.所以如果把这个图标放在input表单外面,就不会出现这个问题. 二.表单自动填充会添加浏览器默认样式怎么处理和避免 第二张图,就是表单自动填充后,

关于div宽度和高度的100%设定

设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题! 其实,要弄懂div宽度|width100%.div高度|height100%到底是怎么实现的,只需弄懂一个简单的问题就可以了,即100%的基数是谁,就是这个100%是相对于谁的width.height来说是100%? div的100%是从其上一级

用原生JS实现的一个导航下拉菜单,下拉菜单的宽度与浏览器视口的宽度一样(js+html+css)

这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消失.为了便于理解我画了一个图,如下: 在这个案例主要用到的知识有:设置定时器,清除定时器,mouseout和mouseover事件,另外还有css中position相关知识.本案例分为两部分讲解.第一部分html和css,第二部分js. 一. html和css 将导航这个导航条包裹在一个div中,这

div 加滚动条 超过div宽度 自动换行 div居中

一.div 中加滚动条 一. <div style=" overflow:scroll; width:400px; height:400px;”></div> 记住宽和高一定要设置噢,否则不成的 不过在不超出时,会有下面的滚动条,所以不是最好的选择 二. <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div> 记住宽和高一定要设置噢

禁止浏览器自动填写

参考:司徒正美 http://www.cnblogs.com/rubylouvre/p/5109300.html 禁止浏览器自动补全,使用 autocomplete="off" 浏览器记住密码的效果 方法:打破用户名密码的结对关系,<span style="color:red; font-size:24px;">特别注意</span>复制input控件仅增加不可见的样式,eg:style="display:none;" 存