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 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;，以便您可以看到。

使用`max-width`和`display：inline-block`

1 个答案: