- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试创建一个纯基于 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/
在 MySQL 8.0.21 上,我有一个空表 ( Tbl ),只有一列: num , 类型 float . 我插入一行,值为 0.1 : INSERT INTO Tbl(num) VALUES(0.
我一直在阅读 Swing 教程“如何使用表”,尽管它对 JTable 新手来说提供了很多信息,但我在尝试转向时立即遇到了障碍示例并自行解决。 因此,如果您希望您的 Swing 应用程序拥有漂亮的自定义
首先,请原谅,因为我对这个有点陌生,所以我的代码看起来不太漂亮......但下面的一切都有效,## 这不是一个寻求非工作代码帮助的线程##. 现在那已经不碍事了……事情是这样的:我已经为 FF 制作了
我已将 1-1 这段代码从 C++/OpenGL 移植到 C# SharpGL: float[] cameraAngle = { 0, 0, 0 }; float[] cameraPo
背景: 我在一台旧笔记本电脑上运行。我总共只有 512Mo 可用 128Mo ram。没钱买更多的 ram。 我使用 mmap 来帮助我规避这个问题,而且效果很好。C代码。Debian 64 位。 问
这是一个奇怪的。 重命名类后,我的一个表单开始在设计器中出现错误,拒绝打开。有趣的是,当我运行该程序时,该表单运行良好。 我开始恢复我的更改以推断问题所在。我现在已经完全恢复到上次提交 - 我知道表单
我有一个项目列表,上面有不同的事件处理程序。 ... Item ... Add to list A Add to list B
我有一个静态 View ,它是一个设置 View 。它有 3 个部分 section 1 has 3 rows section 2 has 1 row section 3 has 1 row 我在每一
我大概花了一个月的时间在互联网上研究这个问题,但还没有找到答案。我的代码执行以下操作(所有 Javascript)。 假设我在 mydomain.com 上有一个 test.html 首先在 head
谁能解释一下 prototype.init 函数在 JavaScript 中的意义以及它在对象实例化过程中何时被调用? 为什么要用空函数覆盖它? 我正在阅读 JavaScript for Web 这本
我喜欢 MVVM。我不喜欢它,但喜欢它。其中大部分是有道理的。但是,我一直在阅读鼓励您编写大量代码的文章,这样您就可以编写 XAML 而不必在代码隐藏中编写任何代码。 我举个例子。 最近我想将我的 V
我遇到了一个问题,我确信许多新/初级 Web 开发人员都面临着这个问题。在陈述问题之前,最好先列出导致我出现“问题”的事件。 第 1 步 - 前端:我遵循的教程允许我使用 vue-cli 创建一个 V
所以,我做了很多搜索和摆弄,但找不到解决方案。也许我的情况很独特——或者更有可能我只是不知道我到底在做什么。我比刚开始时更接近了,所以这令人振奋。不管怎样 - 我们来了智囊团 - 非常感谢任何帮助。
iTunes connect 一直拒绝我的二进制文件进行应用程序更新,这让我发疯。通常我可以弄清楚,但我已经尝试了我能想到的一切。也许有人可以伸出援助之手:) 我得到的错误是: The binary
嗯,George Boole 的骨架一定在它的坟墓里感到有些疼痛,因为我的 bool 人刚刚变得疯狂并开始举办派对。我真的认为他们想反抗我。 现在更严重了:可能我在 $watch 方法中遗漏了一些东西
我有一个ul、链表元素和无链接的li。 Home Test1 second_level
为此搜索了答案,但找不到任何内容。我能找到的最接近的是 difftime returning 0 when there is clearly a difference其中有一个很好的解释,与如何将参数
Closed. This question is opinion-based。它当前不接受答案。
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve t
所以...我的问题有点奇怪。我有一个简单的 UIToolbar 被添加到在 viewDidLoad 时间调用的 navigationController 的 View 层次结构中。听起来很简单,对吧?
我是一名优秀的程序员,十分优秀!