Using `max-width` with `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的最大宽度为500px, #right的最大宽度为200px。然而，当这个HTML呈现#left和#right时，它们的宽度正好和它们的内容一样多(在我的例子中，左边是427px，右边是178px)。

有谁知道如何强迫max-width与display: inline-block得到尊重吗?如果我删除display: 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;分别添加到左边和右边，这样你就可以看到