在`display：inline-block`中使用`max-width` [英] Using `max-width` with `display: inline-block`

问题描述

我有以下HTML：

 < div> 
< div id =leftstyle =display：inline-block; max-width：500px; vertical-align：top;> 
内容剩下
< / div> 
< div id =rightstyle =display：inline-block; max-width：200px; vertical-align：top;> 
 content right 
< / div> 
< / div> 
  

我限制 #left 500px，最大宽度为 #right 为200px。然而，当这个HTML呈现 #left 和 #right 时，其宽度与它们的内容完全相同（在我的例子中

有谁知道如何强制使用 max-width 来尊重 display：inline-block ？如果我删除了 display：inline-block ，然后左右渲染为最大宽度，但是一旦我将内联块左后和右侧div缩小到大约内容。任何想法？

以下是完整的代码：

 < div class = 体 > 
< div id =left> 
内容剩下
< / div> 
< div id =right> 
 content right 
< / div> 
< / div> 
 
 #left {
 display：inline-block; 
最大宽度：100px; 
 background-color：yellow; 
 vertical-align：top; 
} 
 
 #right {
 display：inline-block; 
 max-width：300px; 
 background-color：green; 
 vertical-align：top; 
} 
  

解决方案

点。它似乎在为我工作。
http://jsfiddle.net/uxb5hgtL/

我向左右添加了 background-color：yellow; 和 background-color：green; 所以你可以看到。

I've the following 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>

I'm limiting max width of #left to 500px and max width of #right to 200px. However when this HTML renders both #left and #right take exactly as much width as their content (in my case left is 427px and right is like 178px).

Does anyone know how to force max-width be respected with display: inline-block? If I remove display: inline-block and then both left and right render at max-widths but as soon as I put inline-block back left and right divs shrink to approximately their content. Any ideas?

Here's full code:

 <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;
}

解决方案

I don't get your point. It seems to be working for me. http://jsfiddle.net/uxb5hgtL/

I added background-color: yellow; and background-color: green; to left and right so you can see.

这篇关于在`display：inline-block`中使用`max-width`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！