解决设置float属性，窗口大小改变时，页面变形问题

最新推荐文章于 2023-03-24 15:44:12 发布
最新推荐文章于 2023-03-24 15:44:12 发布
阅读量1k 收藏 3
点赞数
文章标签： 移动开发
原文链接：http://www.cnblogs.com/CodingBird/archive/2012/11/08/2761079.html
版权

页面变形产生原因：一般出现在父容器宽高指定为百分比而子容器（float属性）指定具体宽高的情况，当浏览器窗口便小时，相应父容器也变小，如果小到无法容纳两个并排的子容器，设置了float的子容器就会换到下一行，造成变形

解决方法：1、尽量父子容器宽高设置为百分比 ，或者父容器指定具体值

     2、如果父容器是百分比，子容器为具体值，可以为父容器指定min-width,min-height 

转载于:https://www.cnblogs.com/CodingBird/archive/2012/11/08/2761079.html

aaaa8809196
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div布局解决float浮动随窗体变化问题
hexu_blog的博客
01-30 772
1.先看效果图 2.代码 <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>     </head>     <style>   
css 子元素浮动后父元素没有高度导致页面变形的解决办法
weixin_30493321的博客
04-12 167
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.par{width: 100%;height: auto;border: 1px solid red;}.left{width: 40%;f...
flask修改HTML元素
weixin_59246157的博客
03-24 548
需要注意的是，如果要更改HTML标签的属性而不是内容，可以在模板中使用标记的属性值，或者在视图函数中更改上下文变量的属性值。在Flask中，HTML标签的内容通常也是由视图函数传递给模板并呈现的。和Django类似，如果要更改HTML标签的内容，可以通过更改视图函数的上下文变量的值来实现。这将更改``标记的`src`属性为"/static/images/new_image.jpg"。当呈现模板时，标记`{{ name }}`的内容将更改为"Jane Doe"。# 更改上下文变量的属性值。
float 浮动 div 不随浏览器分辨率 大小而位置发生变化
热门推荐
z69183787的专栏
04-10 1万+
dsadsadsa 111111111111111111 在浮动层外部 增加 父DIV 设定宽度jik
CSS使用float属性设置浮动元素的实例教程
01-19
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一...float效果展示基本设置 在网页中正常添加3个div色块: HTML代码: XML/HTML Code复制内容到剪贴板   div1     div2     div3 </div
CSS之float属性详解
01-08
float属性指定一个盒子（元素）是否应该浮动，可以设置浮动方向。 css语法 float：left|right|none|inherit ； 属性值： 值 描述 left 元素向左浮动 right 元素向右浮动 none 默认值。元素不浮动，并会...
在解决ul居中问题时想到的几点
10-30
4. ul 居中问题解决方法：在解决 ul 居中问题时，可以使用 text-align:center 属性使 ul 居中。但是，如果 li 元素浮动了，text-align:center 属性将不生效。这是因为浮动元素会脱离文档流，导致父元素无法居中。 5...
css浮动 float属性详解
11-21
给元素本身添加float属性 float值： left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值...
css float属性 图解float属性的点点滴滴
09-22
当设置元素的`float`属性为`left`时，元素会被移动到其容器的左侧，同时允许其他内容围绕其左侧。这对于创建图像向左对齐的文本布局特别有用。例如： ```html <img src="image.jpg" style="float: left; margin: ...
解决float属性导致换行
码小二的博客
09-06 8581
在h5开发中，经常会使用float属性来解决一些布局问题。但在某些复杂的布局中也会遇到使用float属性是导致一行中的元素无法对齐或者float元素换行等现象。在遇到这种问题时，我们可以修改元素的位置来解决换行或者元素不对齐的现象。
解决float布局下firefox火狐缩小导致div下沉的问题
小菜鸡程序媛的挣扎史
07-24 325
FIFEFOX缩放时效果变化 CHROME缩放效果 判断原因 经过多次试验，应该是在firefox中缩放时border的值引起的问题。因为存在border在缩放时，里面的div不能刚好占据足够的位置，由于float的特性就会下沉。即使数值计算刚好也会发生下沉的问题。 解决方案 1、在item的div中加入 box-sizing: border-box; 这条属性消除b...
html中的div浏览器缩放自动换行,关于缩小浏览器窗口，浮动的div换行的问题。...
weixin_42298081的博客
05-31 2142
IE：放大缩小浏览器页面，不变。firefox和google：缩小页面浮动的div换行。谢谢~~图片如下：1、IE缩小：2、火狐缩小：3、google缩小：代码：Documentbody{margin:0px;padding:0px;}.main,div{width:1200px;margin:20px auto;/*position:relative;*/padding:0;border:1px...
float产生的高度塌陷问题解决方案（包含全部方法)
surymy
12-29 2519
一、什么是高度塌陷 高度塌陷问题是f元素loat后很容易产生的一种现象，具体原因是： 在设计网页时，父元素的高度一般不会被写死，我们希望它会根据子元素的内容多少自动变化。 但是在浮动布局中，父元素的内容高度默认是被子元素撑开的，但子元素浮动后，便脱离了文档流，因此无法撑起父元素，从而导致父元素高度丢失。之后父元素下边的元素会自动上移，导致页面布局混乱。 二、解决方法 把父元素高度写死（闭环了属于是）推荐指数：0 BFC（Block Foematting Content）：块级格式化环境 clear：清除浮
float属性使用后导致元素错位或塌陷的原因及解决方案
qq_36996271的博客
08-23 8030
CSS使用float属性（float）导致塌陷的原因及解决方案（清除浮动） 正常的文档流。 使用了float会怎么样？ 正常的文档流 我们先来看一下不使用float属性的文档布局是怎么样的。 块级元素： 对应的代码： &amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;html lang=
CSS：浏览器窗口缩小时，浮动元素换行问题
weixin_41936163的博客
11-28 1926
为其父元素添加width的确切值，而不是让父元素去继承宽度
经验分享：CSS浮动(float,clear)通俗讲解
weixin_33714884的博客
03-27 7100
       很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。        前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。        写在前面的话：        由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。        如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你...
opengl实现窗口改变大小时，图形跟着变化
最新发布
06-06
当窗口大小改变时，OpenGL中的视口（viewport）也需要相应地改变。视口是OpenGL中用来渲染图形的区域，其大小应该与窗口大小相匹配。 在窗口大小发生改变时，你需要重新设置视口。可以使用glViewport函数来设置视口的位置和大小，例如： ``` void reshape(int width, int height) { glViewport(0, 0, width, height); // 其他窗口大小改变时的操作 } ``` 在窗口大小改变时，还需要重新计算投影矩阵和模型视图矩阵，以确保图形正确地显示在新的视口中。 具体地，你需要重新计算投影矩阵和模型视图矩阵，例如： ``` void reshape(int width, int height) { glViewport(0, 0, width, height); // 计算投影矩阵 glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(fov, (float)width / height, near, far); // 计算模型视图矩阵 glMatrixMode(GL_MODELVIEW); glLoadIdentity(); // 其他模型视图矩阵操作 // 其他窗口大小改变时的操作 } ``` 这样，在窗口大小改变时，图形就会跟着变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值