藤本植物导航
&>&&>&&>&正文
我看到网上很多这样的例子，要么是浏览器放大之后布局乱了，要么是缩小...#main #left{ border:#FF0 1 margin:1 float: width:200 height:300 } #main #right{ float: border:#0F0 1 width:550 height:300 margin:1 } 把这里的border去掉就不会出现任何放大或放小的排...
我用css和div做的一个网页，为什么在浏览器里进行窗口缩放时里面的div只做竖向缩放？
list-}li{height:0padding:28px:margin-right:960px:width:}ul{ font-size:margin-left:}
#container{width.nav{*单独定义*&#47:none:28}a{text-decoration:text-align:none:12%;}li a{text-decoration:none:0line-}img{border-background/text-align:0body{margin:#FFF:hidden:10text-align:0px:none:100%;};padding:12px:float我用css和div做的一个网页，为什么在浏览器里进行窗口缩放时里面的div只做竖向缩放？/*单独定义*/body{margin:0padding:0 font-size:12text-align:}li{height:28line-height:28width:
比如说缩小窗口吧，缩小之后里面原本是正方形的模块都最后变成了长方形的了，每个div的宽和高已经用百分比表示。能否贴上代码啊！一般用百分比不会出现这种情况代码贴上来
我看到网上很多这样的例子，要么是浏览器放大之后布局乱了，要么是缩小...#main #left{ border:#FF0 1 margin:1 float: width:200 height:300 } #main #right{ float: border:#0F0 1 width:550 height:300 margin:1 } 把这里的border去掉就不会出现任何放大或放小的排...我想固定页面中元素的相对位置，该怎样修改CSS参数？如果图片的宽度随浏览器的大小变动而变动的话，请把宽度设置成百分数，不要给具体的固定值（如800px、900px） 如果图片宽度想固定的话，请设置成固定的值 你这个问题估计是有些元素的宽度为固定值，有些为百分数，然后宽度变动的时候，百分数的...一个网页游戏页面，因为很多图片相互覆盖,所以有很多个div层，但是，在...现在的大部分都是div+css的布局，出现问题是很常见的，如网页缩小时候的错位： 1，因为你的DIV的宽高是确定的值，所以你一缩小，自然你的浏览器宽度和高度就发生了变化，自然就会造成div的挤压，因为导致错位，就像代码中的一样： aaa bbb 这样...&style type="text/css"&body{ min-width:550}#head{ backgrou...代码如下： $(window).resize(function() { $("div").width(document.body.offsetWidth + "px"); $("div").height(document.body.clientHeight+ "px"); }); 百分之百显示没有问题，而浏览器缩放以后div中的元素就消失了刚找到了一种这个。看倒数第二个 /js/tupian-1083.html我需要实现一个div使得这个div能够根据网页的放大缩小而变化。你的nav占去了那么宽，缩小的最小宽度肯定会“”消失“”啊，就是浏览器出现了横向滚动条，你可以设置两种CSS，一种在宽屏用，一种在小屏用，小屏就把logo设置为下拉的菜单，这种为响应式1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示 @media only screen and (min-width: 100px) and (max-width: 640px) { div{ width: 100 height: 100 } } @media only screen...一般缩小是说的宽度，毕竟用户的浏览器和分辨率大小不一样。 最外层一个div然后再套一个div，然后里面放正文。 外层div的css设置width并用%表示，然后设置text-align居中（兼容ie），内层div的css设置margin为"0 auto"（一体的，无引号）并设置...CSS实现div随着网页的大小变化而变化，首先我们需要了解div的width和height的属性设置，有一个auto参数，就是代表的是随着内容的大小而改变，浏览器缩小，自然div的宽度就会减小，高度就会有所增加，具体看下代码: #div1{ width: height:au...
种植经验最新
种植经验推荐
& 6种植网 版权所有
渝ICP备号-23温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
黑夜,给了我黑色的眼睛,我却用它来寻找光明....
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(10642)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_095067',
blogTitle:'div自动适应浏览器缩放的宽度',
blogAbstract:'
有时候我们需要让某个外层div宽度设置为Auto，横向布满整个浏览器视窗，在最大化情况下浏览效果达到。但是我们缩小浏览器或是拖小其视窗的时候问题出现了，如果还有个div比浏览器视窗的宽度大，那Auto的div只显示了前半部分，相当于水平滚动条拉到最左边的视窗大小。如何让Auto的div在缩放的情况下也能100%显示？
这里用到一个resize事件来监听， resize事件监听使用不当会造成浏览器假死现象，如果缩放浏览器会不断触发导致假死。
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:4,
publishTime:5,
permalink:'blog/static/',
commentCount:2,
mainCommentCount:1,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'黑夜,给了我黑色的眼睛,我却用它来寻找光明....',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}君，已阅读到文档的结尾了呢~~
CSS盒模型常用定位方式的研究与应用,css盒子模型,css 盒模型,css3弹性盒模型,css3盒模型,css3 盒子模型,css盒子模型代码,css盒子模型原理,css的盒子模型,css盒子模型的理解
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
CSS盒模型常用定位方式的研究与应用
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
IE：放大缩小浏览器页面，不变。firefox和google：缩小页面浮动的div换行。谢谢~~图片如下：1、IE缩小：2、火狐缩小：3、google缩小：代码：&!doctype html&&html lang="en"&&head&
&meta charset="UTF-8"&
&title&Document&/title&
&style type="text/css"&
.main,div{
width:1200
/*position:*/
padding:0;
/*main左边布局*/
.mainleft{
padding:0;
height:348
border:1px solid #B8D9E9;
/*main中间*/
.maincenter{
margin:0 10
padding:0;
height:348
border:1px solid #B8D9E9;
/*mian右边*/
.mainright{
padding:0;
height:348
border:1px solid #B8D9E9;
&/head&&body&
&div class="main"&
&div class="mainleft"&左&/div&
&div class="maincenter"&中&/div&
&div class="mainright"&右&/div&
&/body&&/html&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我给你看看我这里的效果吧：火狐
,你要不把你的效果图截图出来？确实没问题啊
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
测试了一下chrome：（版本：）
都没有问题如果按照你刚才评论的就是按crlt-的时候的话
确实有你说得
问题至于为什么我也不是很清楚解决办法有一个在你的代码中添加
box-sizing：border-box
具体IE中可以是因为这个属性本就是IE的 哈哈
我已经试过了
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：图片溢出div，超出div解决办法 - 简书
图片溢出div，超出div解决办法
最近在写网页的时候，遇到一个问题
当我的图片宽度大小没有设置，过大的时候，它会超出我的div宽度。这个时候，我给它设置了一个小于我的div的宽度，它是可以进入div盒子而不溢出的，然而，当我们的浏览器缩小的时候，我的div是栅格布局，固定了百分比会随浏览器可视界面而缩小，但是此时图片因为固定宽度不能同步缩小，还是会发生溢出现象。还有一种将就的办法，就是设置overflow:hidden,隐藏溢出的部分，但是大家都可以预料的到那种糟糕的效果
我的解决办法
给图片设置width:100%
此时的显示效果
在响应式模式下也可以自己随盒子缩放
可以使用一段js来解决
window.onload = function(){
//获取图片元素
var imgs = document.getElementsByTagName("img");
//获取div元素
var contentLeft = document.getElementById("col-md-7");
//使用js设置图片元素宽度的变化
for(var i=0; i&imgs. i++){
imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
//40是要减去padding
此时的效果
然而，此时还有一个问题，因为是onload，所以当浏览器宽度发生变化时
它还是会超出div于是想到了监听浏览器窗口变化网上有很多种使用jquery监听的，其实可以使用window自带属性
window.onresize监听
加入代码如下
window.onresize = function(){
var imgs = document.getElementsByTagName("img");
var contentLeft = document.getElementById("col-md-7");
for(var i=0; i&imgs. i++){
imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
此时无论怎么响应，图片永远不会溢出
完整代码如下
&meta charset="utf-8" /&
&title&div图片溢出&/title&
&style type="text/css"&
#container {
width:80%;
#col-md-7 {
width:70%;
height: 800
padding: 20
#col-md-5 {
width: 15%;
height: 800
padding: 20
max-width: 730
&script type="text/javascript"&
window.onload = function(){
var imgs = document.getElementsByTagName("img");
var contentLeft = document.getElementById("col-md-7");
for(var i=0; i&imgs. i++){
imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
window.onresize = function(){
var imgs = document.getElementsByTagName("img");
var contentLeft = document.getElementById("col-md-7");
for(var i=0; i&imgs. i++){
imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
&div id="container"&
&div id="col-md-7"&
&div id="col-md-5"&&/div&
what you see is what you get}