CSS如何设置自动大小和固定大小?

这样的效果:
<div style="width: 20%;height: 100%;float: left;background-color: Red;"></div>
<div style="width: 80%;height: 100%;float: left;background-color: Black;"></div>

但是我想要第一个div宽度固定200像素同时改变浏览器大小的时候第二个DIV会自动改变大小,这样的话:
<div style="width: 200px;height: 100%;float: left;background-color: Red;"></div>
<div style="width: 80%;height: 100%;float: left;background-color: Black;"></div>
第二个DIV就出问题了,它应该是宽度100% - 200px,怎么才能做到呢

很好处理啊,
第一个div你设定float: left;width: 200px;
第二个div你却不一定非要加;float: left; 并排可以用其他方法的
第二个div你可以设margin-left:200px; 因为div默认是最大宽度,所以浏览器宽度改变的时候,第二个div宽度也就会改变,举例如下:
<div style="width: 200px;height: 100%;float: left;background-color: Red;"></div>
<div style="margin-left:200px; height: 100%;background-color: Black;"></div>

还有另一个方法:
<div style="width: 200px;height: 100%;float: left;background-color: Red;"></div>
<div style=" overflow:hidden; height: 100%;background-color: Black;"></div>
温馨提示:内容为网友见解,仅供参考
第1个回答  2015-08-18
比如div如果是高度的话,里面的内容有多高div就有多高,默认的是自动高度,如果设置固定高度为某个值,超过这个值就会出现滚动条
第2个回答  2015-12-25
先定义html,body{height:100%}

再设置img{height: 百分比}

就可以了
第3个回答  2011-07-23
<div style="width: 200px;height: 100%; float: left;background-color: Red;"></div>
<div style="background-color:#ff1; margin-left:200px;"></div>

margin-left:200px

css怎么自动调整div的位置和大小
1、先新建一个html文件,并在head中添加样式表【styletype="text\/css">\/style>】。2、在body中添加一个DIV,并引入一个CSS,命名为【aaa】。3、给这个DIV添加背景色,并定义它的宽和高。【background:#FA2;width:400px;height:600px;】。4、然后添加如下代码。【position:fixed;left:50%;top:...

css小盒子随着大盒子变大(css设置盒子大小始终为100%)
css中盒子里的盒子如何调整与外面大盒子的位置关系?1、要让盒子居中需要设置:margin:0auto。当然需要给盒子设置宽度,不然盒子默认的宽度是父容器宽度。也有其他方式,比如父容器设置display:flex;justify-content:center也是可以的。方法不少能达到效果就好了。2、首先把盒子的大小固定住,然后改大盒子中...

css怎么设置高度固定 宽度自适应
width:100%;height:100px;overflow:hidden;这样宽度就会自适应了,高度不变,超出的内容就会隐藏了

如何用 css 来固定页面图片的大小?
您可以使用CSS中的height和width属性来固定页面图片的大小。例如,要将图像的宽度设置为300像素,高度自动调整,请使用以下代码:```cssimg { width: 300px; height: auto;}```如果您想要指定高度和宽度的百分比,请使用以下代码:```cssimg { width: 50%; height: 50%;}```

css自适应?
一是通过将该图片设定为某个div的背景图片,然后该div的长宽不使用绝对的px,使用相对的em或者rem。二是将图片设定display:block,设定图片的长宽为rem或者em。还是要看是什么情况下来去自适应图片的,如何使用CSS强制图片自适应大小 !DOCTYPEPUBLIC"-W3CDTDXHTML1.0TransitionalEN"":w3.\/TR\/x1\/DTD\/x1...

DIV+CSS,如何让图片自适应大小?
这个才是你真正需要的答案。 var MaxHeight=100;\/\/图片最大高度 var MaxWidth=100;\/\/图片最大宽度 MaxHeight)this.height=MaxHeight;if(this.width>MaxWidth)this.width=MaxWidth;">

网页设计:如何让页面宽度自适应,并且最宽值不大于1600px,最低不小于...
1.你可以用js去计算在不同的宽度情况下,调用哪一个css,用if去判断;2.或者也可以设置min-width:800px和max-width:1600px;

div+css怎么让图片自适应大小时,又不超过它本身最大的时候!
1、页面大的时候它也变大但是大到它本身的尺寸的时候,再扩大页面它就不大了!设置最大宽高为图片的宽高~!代码如下: 2、例子: 插入图片的信息设置:

自动换行 css 自适应 宽度不能用固定的,因为必须要适应各类手机,求方 ...
两种方式:一种方式,手机站css设置的时候全部用百分比来控制,这样所有的页面都会自动缩放;第二种方式:需要你来判断浏览器的或者应该说是手机屏幕的大小,来设置其css样式:如:当然我只是举个例子,其余的样式你可以自己设置,你设置个最大宽度与最小宽度max-width与min-width,一般都是320px--640px...

CSS弹性盒子以及自适应布局(实现水平垂直居中以及不同分辨率大小布局一 ...
在项目属性方面,flex属性尤为常用,可以设置为1,以实现子元素在空间上的自适应比例。取消此属性后,如果子元素高度固定,可能无法填满屏幕。而通过调整flex比例,子元素的高比例可以自动调整。自适应布局则涉及到单位选择,如百分比(%)、视口单位(vh, vw)、相对单位(em, rem)。其中,rem尤其重要,...

相似回答