浏览器缩小 css布局乱了ok

ps:下面呢些都是我看的别人的未做尝试，其实我本意是：我写了一个静态网页，但是一旦界面缩小所有框架都浮动了，后来才搜的去浮动，但是尝试没有效果（可能是我position用的很多吧！），最后只是全局设置了

 .container{
width:100%;
min-width:1280px;
}

这样就好了！！！

界面就只显示界面大小的部分，其余就未显示，也是不错的。（不过我宽度基本都用的%）

还有我中间遇见的小问题：就是有的时候加float的重要性：不加浮动有的时候下面的内容就会跑到上面来，填充满才为止，加了浮动就解决了。

后续修改：

最近有网页内部的一些部分缩小时候出现跑到下面，所以尝试了positionLrelative;overflow:hidden;均木有效果，

后来还是想到设置宽度：具体是1.首先设置浮动部分的父元素的宽度（百分比，px都可）

2.再设置浮动部分的宽度（%）就ok了！

“浏览器缩小 css布局乱了”，出现这种情况一般是这种情况：给元素设置了浮动，但没有清除浮动，比如

当浏览器缩小时，到了一定程度(此处小于1000px时)，因为宽度不够两个div的总宽度，
这时右边那个div就会跑到下面去，类似的，当一个页面用了过多的浮动时，将浏览器缩小，
则里面的内容会错乱，甚至一塌糊涂，所以如果设置了浮动一定要记得清浮动。
清除浮动的代码不一，我这里提供一个，代码如下：

.clearfix{zoom:1;}
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   font-size: 0;
   clear: both;
   overflow: hidden;
   visibility: hidden;
}

使用的时候只要在设置了浮动的直接父标签上添加清除浮动的样式即可,但还有一点一定要记住，就是不要再使用width固定值，而应改成百分比。
具体代码如下：
   .f-left {
       float:left;
       width:50%;
       height:200px;
       border: 1px solid #4c9fff;
   }
   .f-right {
       float:right;
       width:48%;
       height:200px;
       border: 1px solid #4c9fff;
   }
<div class="clearfix">
   <div class="float"></div>
   <div class="float"></div>
</div>

这样就不会有问题啦。

相关的一些文章：http://www.csdn123.com/html/20130206/33/9cab6ac53ef30e4b33a4f5eff11c788a.htm

http://www.cnblogs.com/top5/archive/2011/07/11/2103343.html

浏览器缩小 css布局乱了ok相关推荐

php动态页面在ie浏览器中css布局板块全缩在中间,CSS网页布局开发时的常见问题及解决方法...
双外边距浮动的问题使用浮动,且有给外边距的div在ie6中会出现外边距加倍的:这是比较简单的解决的bug;只要将元素的display属性设置为inline就行了.所以每当对具有水平外边距的元素进行浮 ...
项目发布到各个电脑上，css样式都变了，jsp页面布局乱了，怎么处理
2018/11/14年第二次修改这个博客: 要想项目自适应所有的浏览器和各种分辨率的电脑,强力推荐一个功能强大的前端框架BootStrap 因为如果是设置百分比不是像素的话,虽然是对的,但是人工的百分 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
div+css 布局浏览器兼容
第一次写div + css 的站点,进度相当的慢,而且项目也赶得挺急的,整个人被操劳的很累,做了几天后我把所学到的,一些技巧和网上搜罗到了综合下发出来,希望对做设计的朋友有帮助! 1.为什么在不同的 ...
重构html布局,网站重构|网页重构|浏览器兼容|div+css布局|psd转html|概念网络
什么是网站重构网页重构就是把"没有采用Div+CSS布局的网站,大量使用HTML进行定位.布局,或者虽然已经采用Div+CSS,但是未遵循HTML结构化标准的站点"变成" ...
解决不同浏览器的css兼容问题
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题收藏所有浏览器通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...
解决不同浏览器对css支持问题详解
解决不同浏览器对css支持问题多使用JQuery,它有很好的兼容性. 在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF ...

浏览器缩小 css布局乱了ok

浏览器缩小 css布局乱了ok相关推荐

最新文章

热门文章