Question

我的页面上有两个div，第一个是用于导航的小div，第二个是主要内容。期望的结果是它们将并排排列。

由于主要内容占用了大量的水平空间，我希望它能够填充75％的容器，以便根据屏幕宽度变大或变小。显然这在CSS中是一个简单的width:75%但是当我这样做时，主内容div拒绝与导航div的右边对齐。但是，如果75％的div占用400px并且我将width:75%更改为width:450px，那么div尽管如此符合我的要求，尽管大小相同。当我查看主要内容div的盒子模型时，我可以看到内容是75％，但它右边有一个边距占据了容器的其余部分。我已经尝试将其设置为margin-right: 0px;，但它根本没有变化，边距仍然存在。

我为此定义的唯一CSS是：

#mainArea_pnlErrorLog {
 width: 50%;
 position: relative;
 margin-right:0px;
}

设置position:absolute;修复了问题，但它创建了一个新问题，因为容器不会垂直扩展以适应主要内容而且它会超出容器

以下是更好地说明问题的网页截图：！1

Answer 1

问题是，在您的HTML代码中，您有两个嵌套<div>样式为display: inline-block：

<div id="mainArea_pnlControls">
     <div id="mainArea_pnlErrorLog">
         ...lots of content here...
    </div>
</div>

#wrapper {
    width: 420px;  /* fix surrounding element width */
    padding: 10px;
    background: #ddd;  /* gray */
}
#controlsList {
    display:inline-block;
    width:145px;
    height:50px;
    background: #faa;  /* red */
}
#mainArea_pnlControls {
    display:inline-block;
    vertical-align:top;
    background: #afa;  /* green */
}
#mainArea_pnlErrorLog {
    width: 50%;  /* set to 200px to see intended rendering */
    position: relative;
    background: #aaf;  /* blue */
}

<div id="wrapper">
    <div id="controlsList">
         SIDEBAR
    </div>
    <div id="mainArea_pnlControls">
         <div id="mainArea_pnlErrorLog">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
        </div>
    </div>
</div>

外部mainArea_pnlControls没有在CSS中定义明确的宽度，因此它会根据需要进行扩展以适应其内容。当你给内部一个width: 50%时，你告诉布局引擎使内部<div>的一半宽于外部。

这对布局引擎来说有点混乱。一方面，通过使用display: inline-block作为外部div，而不指定显式高度，您已隐式告诉浏览器将其设置为与其内部div相同的宽度。另一方面，通过为内部div指定width: 50%，您告诉浏览器使其只有外部div的一半宽。

显然，这些要求冲突（至少除非两个div都有零宽度），所以其中一个必须失败。

Firefox至少选择失败相等宽度的隐含要求，而是将内部div设置为外部宽度的一半，以满足显式width: 50%要求。但是，这仍然留下了究竟外部div应该在多大程度上的问题。因为它是一个内联块，所以它不应该比包围它的块宽（除非它被强制溢出它的容器），但是它的宽度上唯一的下限是它需要容纳它的内容。但在这种情况下，内容将总是缩小到比外部块更窄，所以...那里没有有意义的下限。

显然，Firefox最终会做的事情是这样的：

确定内部div 的内容有多宽，如果它可以自由扩展到它想要的宽度。

将外部div的宽度设置为内容“想要”的宽度和封闭块的宽度的最小值。

将内部div的宽度设置为该值的50％。

以该宽度渲染内部div的内容（这可以保证它将换行或溢出）。

如果你使内容更窄，你可以清楚地看到效果，这样它实际上可以完全贴合在一条线上：它仍然会包裹，因为内部div最终正好是它需要容纳的一半宽度它，如下面的代码段所示：

#outer { display:inline-block; background: #afa; /* green */ } #inner { width: 50%; background: #aaf; /* blue */ }

<div id="outer"> <div id="inner"> BLAH BLAH BLAH BLAH BLAH BLAH </div> </div>

无论如何，解决方案很简单：不要这样做。要么完全摆脱其中一个嵌套div，要么只在外层设置width:属性，而不是内在的。

使用％width代替px废弃div的对齐

1 个答案: