html - 将 `max-width` 与 `display: inline-block` 一起使用

Question

我有以下 HTML:

<div>
 <div id="left" style="display: inline-block; max-width: 500px; vertical-align: top;">
   content left
 </div>
 <div id="right" style="display: inline-block; max-width: 200px; vertical-align: top;">
   content right
 </div>
</div>

我将 #left 的最大宽度限制为 500 像素，将 #right 的最大宽度限制为 200 像素。然而，当此 HTML 呈现时，#left 和 #right 的宽度与其内容完全相同(在我的例子中，左侧为 427 像素，右侧为 178 像素)。

有人知道如何强制 max-width 与 display: inline-block 相关吗？如果我删除 display: inline-block ，然后左侧和右侧都以最大宽度渲染，但是一旦我将 inline-block 放回左侧和右侧 div 就会收缩到大约其内容。有什么想法吗？

完整代码如下:

 <div class="body">
      <div id="left">
        content left 
      </div>
      <div id="right">
        content right
     </div>
 </div>

#left {
    display: inline-block;
    max-width: 100px;
    background-color: yellow;
    vertical-align: top;
}

#right {
    display: inline-block;
    max-width: 300px;
    background-color: green;
    vertical-align: top;
}

Answer 1

我不明白你的意思。这似乎对我有用。 http://jsfiddle.net/uxb5hgtL/

我在左侧和右侧添加了 background-color: Yellow; 和 background-color: green;，以便您可以看到。