Html 将“最大宽度”与“显示：内联块”一起使用`

我有以下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>

---

我不明白你的意思。它似乎对我有用。

---

我添加了

背景色：黄色和
背景色：绿色向左和向右，这样您就可以看到。
Hmm在您的示例中它是有效的。但在我的应用程序中不起作用！我现在调试。我会再打给你寻求更多的帮助来解决这个问题。谢谢我复制了我的问题添加了一些JSFIDLE，这样我就可以看到我的问题了。我添加了完整的代码-基本上是在JSFIDLE中，使文本左右变小（只有一两个单词）。您添加了太多的文本，因此它会填充内容。只需删除一些文本，最大宽度就不起作用。当然，这不起作用，因为您没有设置div的宽度，所以div会一直适应它的内容，直到它达到最大宽度为止。如果希望div具有常量div，只需设置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;
}