调整浏览器大小时可以避免浮动元素移动吗?

2024-02-25

我是编码和 CSS 领域的新手,并且注意到当我调整浏览器大小时,所有浮动元素都会移动到右侧,并且用户被迫水平滚动才能查看菜单。

首先是否需要防止浮动元素不改变其位置?

其次,如果我应该预防的话,有没有办法可以避免这种情况?


浮动是一个痛苦的事情。主要是因为一种浏览器拒绝遵循通用网络标准。是的,就是那个。

有一百万零一个技巧可以避免这些问题。我告诉我的团队遵循以下步骤:

  1. 谨慎使用绝对定位的元素。如果您基于另一个元素进行定位,事物可以“自动调整”,但当事物在数学上粘在一个点上时,情况就不会那么多了。它们有自己的位置,只是不是在页面上的每个元素上。
  2. 考虑“重置”或基于网格的 CSS 布局。我个人比较喜欢960格 http://www.960.gs他们从各种不同的浏览器中消除了猜测。 IE 会把你的 padding 推出去吗?对于 Firefox,IE 特定的填充会过多或过少吗?通过重置和/或网格,这没什么大不了的。
  3. 在计算百分比时(我个人非常喜欢),请记住,浏览器通常不使用数学,其中 1 + 1 = 2。也就是说,如果您有 1000 像素的空间,并且并排计算两个 50% 的列,那么有可能非常好,一个会把自己推到另一个之下。为什么?因为浮动、边距、边框等加起来,并且在不同的浏览器中都有所不同。因此,设计时请考虑 .9 + .9 = 2。它一直有效吗?没有。但这是一个开始。
  4. 测试,测试,测试。 browsershots、Adobe 浏览器实验室等都是您的朋友。不断使用它们可以确保您发布出在所有平台上看起来一致的高质量代码。
  5. 把事情简单化。您可能正在开发一个项目,该项目规定了 100 个不同的样式表,涵盖每个浏览器的每个版本。我们大多数人都以现实世界的预算从事现实世界的项目……这意味着您必须快速有效地部署。使用高质量的 w3 兼容代码和高质量的 CSS,您可以完全避免黑客攻击。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

调整浏览器大小时可以避免浮动元素移动吗? 的相关文章

  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 如何在 PHP 的 HTML 页面中显示错误消息?

    我有以下登录表单 login php 其中要求输入用户名和密码
  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像
  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • jQuery:离线后 POST 出错(iOS 和 Chrome)

    我构建了一个具有离线功能的 HTML5 Web 应用程序 使用 AppCache 程序流程为 Online 在网络上时 应用程序预加载一些基本信息 工作 Offline 用户拿着装有应用程序的平板电脑offline 然后在应用程序上执行他们
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • TensorFlow 图像分类

    我对 TensorFlow 很陌生 我正在做图像分类使用我自己的训练数据库 然而 在我训练了自己的数据集之后 我不知道如何对输入图像进行分类 这是我的代码准备我自己的数据集 filenames 01 jpg 02 jpg 03 jpg 04
  • 下载极大文件时连接关闭

    我们有一个提供文件的网络服务 最近 我们遇到一个非常大的文件 超过 2 GB 无法复制到缓冲区中 我修改了代码以使用HttpCompletionOptions ResponseHeadersRead不使用缓冲区并直接复制到流 然而 大多数时
  • 如何防止部分视图中的脚本多次加载并在同一页面中多次使用部分时导致错误

    在 ASP NET MVC 中 我创建了一个局部视图 该视图在同一页面上呈现两次 我的问题是JavaScript 被包含的次数与分部视图的次数一样多JavaScript 不喜欢重新定义类 我的问题是 如何将 JavaScript 包含在部分
  • Page_ClientValidate() 问题

    function Subscribe if typeof Page ClientValidate function Page ClientValidate if Page IsValid do something CheckUser 该脚本
  • django 管理操作而不选择对象

    是否可以为 django 管理员创建一个自定义管理操作 而不需要选择某些对象来运行它 如果您尝试在不选择对象的情况下运行操作 您会收到以下消息 Items must be selected in order to perform actio
  • tsc 未被识别为内部或外部命令

    我从 VSCode 0 10 6 更新到 0 10 8 并第一次尝试使用 Typescript 不幸的是 当我告诉 VSCode 构建时 我收到错误 tsc 不被识别为内部或外部命令 以下是相关详情 I created a fresh He
  • 如何采用按单独列排序的 DISTINCT ON 子查询并使其快速?

    又名 查询和数据与问题非常相似 选择按某列排序且在另一列上不同的行 https stackoverflow com questions 9796078 selecting rows ordered by some column and di
  • 如何在 Angular 8 或 9 中发出同步 HTTP 请求(发出请求并等待)

    有三个按钮 单击第一个Request HTTP Data As Promise按钮获取其 HTTP 响应作为Promise 第二Request HTTP Data As Observable按钮的响应为Observable 这两个按钮都使用
  • 网页推荐系统

    我正在尝试构建一个推荐系统 该系统会根据用户的操作 谷歌搜索 点击 他还可以明确地对网页进行评分 向用户推荐网页 为了了解谷歌新闻的做法 它会显示来自网络的有关特定主题的新闻文章 用技术术语来说就是集群 但我的目标是相似的 它将是基于用户操
  • 无法在 OS X 上的 Visual Studio Code 中运行命令

    所以我已经启动并运行了 Visual Studio Code 据我所知 我已经安装了所有先决条件 我能够创建一个 ASP NET 5 项目并通过在中键入 dnx web 来运行该网站我的终端 所有这些都有效 我遇到的问题来自 Visual
  • 在 JUnit 中删除文件和目录

    我正在为在目录中创建文件的方法编写测试 我的 JUnit 测试如下所示 Before public void setUp objectUnderTest new ClassUnderTest assign another directory
  • Chrome 打包应用程序具有 onblur 侦听器

    Chrome 打包应用程序是否有任何事件侦听器来判断应用程序是否失去焦点 我正在尝试制作一款游戏 但当我改变焦点时 我似乎无法使其暂停 我尝试了一些不同的方法 例如以下方法 但似乎都不起作用 document onblur pause do
  • 在本地计算机上有效但在服务器上无效的命令?

    我的桌面使用 ubuntu 10 04 服务器使用 Ubuntu 10 04 服务器版本 以下命令 sudo pip install e git http github com facebook python sdk git egg fac
  • 实现接口的数组的隐式类型

    我的印象是 C 编译器将根据它们都可以隐式转换为的类型隐式键入一个数组 编译器生成未找到隐式类型数组的最佳类型 public interface ISomething public interface ISomething2 public
  • 在线图上绘制误差阴影带 - python

    假设我有 25 行这样的代码 x np linspace 0 30 60 y np sin x 6 np pi error np random normal 0 1 0 02 size y shape y1 y np random norm
  • Unity3d 中的 Signalr 和 WebSocketSharp

    我目前已经构建了一个简单的信号中心 我正在将消息从 Unity5 项目推送到其中 鉴于 SignalR2 客户端不适用于 Unity5 我使用 websocketsharp 来拦截 websocket 帧 消息已成功推送到集线器 但是当我尝
  • 选择上一行mysql?

    如果我有一个 mysql 表 其中包含主 ID 和另一个名为 gameScore 的字段 我可以做一些类似的事情 SELECT gameScore FROM table1 WHERE id 100 ORDER BY gameScore AS
  • Oracle VIEW - 列中超过 4000 字节

    我正在使用 SQL 语句的这一部分从 N N 关系中获取信息 目标是获得一个包含如下列的视图 字符串 1 字符串 2 字符串 3 这工作正常 但有时我的列中有超过 4000 字节 SELECT RTRIM XMLAGG xmlelement
  • Linux 等待单个对象?

    这是一段显示问题的代码 main Process process NULL while process cout lt
  • 调整浏览器大小时可以避免浮动元素移动吗?

    我是编码和 CSS 领域的新手 并且注意到当我调整浏览器大小时 所有浮动元素都会移动到右侧 并且用户被迫水平滚动才能查看菜单 首先是否需要防止浮动元素不改变其位置 其次 如果我应该预防的话 有没有办法可以避免这种情况 浮动是一个痛苦的事情