css - 使用 % width 而不是 px 会破坏 div 的对齐方式

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 一样宽。另一方面，通过指定 width: 50%对于内部 div，您告诉浏览器使其宽度仅为外部 div 的一半。

显然，这些要求冲突(至少除非两个 div 的宽度均为零)，因此其中一个必须失败。

至少，Firefox 选择不满足等宽的隐式要求，而是使内部 div 的宽度为外部的一半，以遵守明确的 width: 50%。要求。但这仍然留下了一个悬而未决的问题，即 首先应该将外部 div 到底有多宽。因为它是一个内联 block ，所以它不应该比包含它的 block 宽(除非它被迫溢出它的容器)，但它的宽度唯一的下限是它需要容纳它的内容.但在这种情况下，内容总是会缩小到比外部 block 更窄，所以......那里没有有意义的下限可用。

显然，Firefox 最终做的是(类似于)这个:

1. 计算出内部 div 的内容将有多宽，如果它可以自由扩展到它想要的宽度。

2. 将外部 div 的宽度设置为内容“想要”的宽度与封闭 block 的宽度中的最小值。

3. 将内部 div 的宽度设置为其宽度的 50%。

4. 以该宽度呈现内部 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:属性在外部，而不是内部。