Question

我正在尝试创建一个纯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更高或更低。
仅浮动框：这涉及更改HTML并将框（浅红色）放在代码中的其余内容之前。这会自动扩展主页div（淡蓝色），这是我没有找到使用float方法的方法（没有给定数量的内容）。然而，在Firefox中仍然删除了正文的边缘，文本仍然在IE中搜索，并且框（浅红色）仍然会在主页div（浅蓝色）上方或下方（再次取决于z-index）窗口变小了。
为所有内容分配最小宽度：这在停止IE问题方面非常成功，但需要在比这更复杂的页面上进行一些CSS工作，并支持不同的媒体类型。而且，它仍然没有解决Firefox中的身体边缘问题，或者给我一种方法来扩展主页div（淡蓝色）而没有内容，因为它仍处于浮动状态。
将身体边距更改为边框：这也无法解决Firefox问题;无论是边框还是边距，当我使用花车时，它会在页面的右下角被切断。
在框中添加边距：这对Firefox也不起作用。我可以在主页面内容（浅蓝色）上留下一个底部边缘（这对我来说似乎特别好奇），但是盒子上的右边距（浅红色）仍然会被切断。

任何帮助将不胜感激，因为我找不到任何回答这些问题的网站或帖子，更不用说描述这些问题了;我当然花了很多时间寻找和测试解决方案！

Answer 1

亲爱的先生，亲爱的先生，您似乎无法构建布局。

据我所知，你想要一个2列布局。左列自动扩展到w / e的宽度它是减去右列宽度减去20个像素的边距。右列是固定宽度，将包含菜单或各种html结构......

在左栏中，您有文字，其中包括固定宽度的框，此列中的固定宽度框应始终保留在其中。这意味着我们想要一个最小宽度，即固定宽度的盒子宽度+ 20 px边距+右边的列宽。

我通过在所有内容中创建一个容器来实现这一点，将最小宽度应用于此并制作一个虚拟容器来解决IE6中的最小宽度问题。

以下是一个工作示例：http://jsfiddle.net/uXyPu/

我没有运行IE6或firefox 3.5的版本来测试它，但我相信这会有效。

作为旁注，你在身体标签上使用了一个边距，不要这样做。作为基本规则，保持身体完全展开，最多应用填充物。除此之外，避免利润是一种很好的方法来防止IE6中的无数问题，同时仍然保持您的布局与现代浏览器兼容。并且不要在浮动元素上使用填充/边距...

关于你的问题的第一个评论中的绅士对于完全避免ie6是正确的，我希望你要求大笨蛋做这个项目，这样公司可能会开始考虑他们滥用ie6 ......

Answer 2

我将右侧框移动到代码的其余部分上方，向右移动，然后为主页面提供一个百分比的宽度。

编辑：

也许这更好。我绝对将侧箱放在顶部：20px;右：20px;并给主页一个边距 - 右边：120px所以它不会在边div下面。

尝试新代码：

<!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 {
    background-color:#AAAAFF;
    margin-right: 120px; }
  div.wide {
    width: 300px;
    background-color:#AAFFAA; }
  div.box {
    position: absolute;
    top: 20px;
    right: 20px;
    width:100px;
    background-color: #FFAAAA; }
  h1 {font-size:x-large}
  p {
    padding-bottom:5px;
    font-size:small }
 </style>
</head>

<body>

 <div class="page">
  <h1>MAIN PAGE</h1>

  <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>

Answer 3

使用表格......

<!DOCTYPE HTML>
<html>
<head>
</head>

<body>
    <table width="100%">
    <tr>
        <td valign="top">
             page content
        </td>
        <td width="100" valign="top">
           <div class="box">
               menu content
           </div>
        </td>
    </tr>
    </table>
</body>
</html>

在窗口调整大小时浮动Div疯狂

3 个答案: