个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我正在尝试创建一个纯基于 HTML 和 CSS 的布局，在左侧显示页面的主要内容(扩展到页面的整个宽度，减去框)和右侧的一个较小的框，用于导航或某种信息。以下是导致问题的代码示例，其中描述了问题:
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<title>Floating Div Madness upon Window Resize</title>
<style>
* {margin:0; padding:0}
body {margin:20px; font-size:0px; color:#000000}
div.page {margin-right:120px; background-color:#AAAAFF; float:left}
div.wide {width:300px; background-color:#AAFFAA}
div.box {width:100px; margin-left:-100px; background-color:#FFAAAA; float:left}
h1 {font-size:x-large}
p {padding-bottom:5px; font-size:small}
</style>
</head>
<body>
<div class="page">
<h1>MAIN PAGE</h1>
<p>This is the main portion of the page (light blue). It is currently floated left with a right margin of 120px, to account for the box (light red) as well as the white space between it and the box (light red). All may look well on the surface, but...</p>
<p>Resize the window in Firefox (I tested both 3.5 and 4) and the white margin of the body can be cut off, not only on the right side, but on the bottom of the page, too.</p>
<p>Remove enough text and this div will shrink to fit it, no longer taking up the entire width of the page (minus the box).</p>
<div class="wide">
<p>If I nest another, non-floating div with a fixed width (light green), something even stranger happens when I resize the window, this time in Internet Explorer 6 (maybe in other versions, too): The text in the page div (light blue) is squished, I think by the margin of the box (light red). The fixed width div (light green) is unaffected by this.</p>
</div>
</div>
<div class="box">
<h1>BOX</h1>
<p>(this could be navigation, or anything else)</p>
</div>
</body>
</html>
出于语义原因，我想稍后在代码中保留框(浅红色)，但这是可选的。以下是我已经尝试过的一些比较成功的方法，以及它们似乎不起作用的原因:
绝对定位:当浏览器未调整大小时，这与我自己的代码一样好。它确实在某种程度上解决了 Firefox 中消失的正文边距问题。但是，当窗口大小足够小时，框(浅红色)将位于主页 div(浅蓝色)上方或下方，具体取决于我设置的 z-index 更高或更低。
仅 float 框:这涉及更改 HTML 并将框(浅红色)置于代码中其余内容之前。这会自动扩展主页 div(浅蓝色)，这是我还没有找到使用 float 方法(没有给定内容量)的方法。然而，正文的边距在 Firefox 中仍然被移除，文本在 IE 中仍然被挤压，框(浅红色)仍然会在主页 div(浅蓝色)上方或下方(再次取决于 z-index)窗口变得足够小。
为所有内容分配最小宽度:这非常成功地解决了 IE 问题，但需要在比这更复杂且支持不同媒体类型的页面上进行一些 CSS 处理。而且，它仍然没有解决 Firefox 中的正文边距问题，也没有提供一种方法来扩展没有内容的主页 div(浅蓝色)，因为它仍然是 float 的。
将正文边距更改为边框:这也不能解决 Firefox 的问题；无论是边框还是边距，当我使用 float 时，它都会在页面的右侧和底部被切掉。
向框添加边距:这对 Firefox 也不起作用。我可以让主页内容(浅蓝色)的底部边距保持原位(这对我来说似乎特别好奇)，但框的右边距(浅红色)仍然被削减。
任何帮助将不胜感激，因为我找不到任何网站或帖子来回答这些问题，更不用说描述这些问题的存在了；我确实投入了大量时间来寻找和测试解决方案!
最佳答案
亲爱的先生，您好，您似乎在构建布局方面遇到了麻烦。
据我了解，您需要 2 列布局。左列自动扩展到 w/e 的宽度减去右列宽度减去 20 像素的边距。右栏是固定宽度，将包含一个菜单或各种 html 结构...
在左栏中，您有文本，除此之外，还有一个固定宽度的框，该栏中的固定宽度框应始终位于其中。这意味着我们需要一个最小宽度，即固定宽度框宽度 + 20 像素边距 + 右列宽度。
我通过在所有内容周围制作一个容器，对其应用最小宽度并制作一个虚拟容器来解决 IE6 中的最小宽度问题来做到这一点。
这是一个工作示例:http://jsfiddle.net/uXyPu/
我没有运行 IE6 或 firefox 3.5 版本来测试它，但我相当有信心这会起作用。
作为旁注，您在 body 标签上使用了边距，请不要这样做。作为基本规则，让您的 body 完全拉伸(stretch)，最多使用填充物。除此之外，避免边距是防止 IE6 中出现大量问题同时保持布局与现代浏览器兼容的好方法。并且根本不要在 float 元素上使用 padding/margin ...
第一位评论你问题的先生关于完全避免 ie6 是正确的，我希望你让 big bux 做这个元素，这样公司可能会真正开始考虑他们滥用 ie6...
关于css - 窗口调整大小时 float Div 疯狂，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6324240/
25
4
0
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？ 最佳答案 就像有人说的那样，“
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。 假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？ 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱，我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。 假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀！