Question

我是一个非常原始的例子，有两个display: inline-block div并排。由于某些原因max-width不适用于这些div，这些div会获得内容大小，而不是整个max-width大小。

这里是完整的HTML和CSS。谁能理解这种奇怪的max-width行为？

如果不设置常量#left，如何使#right和max-width消耗width？我正在进行重新设计。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

即使内容小于最大宽度，您知道如何使#left和#right消耗max-width吗？不使用宽度恒定宽度？

我不确定这是否符合您的需求，但flexbox可能正是您所寻找的。

.body {
    display: flex;
    border:1px solid red;
}

#left {
    flex: 0 1 100px;
    max-width: 100px;
    background-color: yellow;

}

#right {
    flex: 0 1 300px;
    max-width: 300px;
    background-color: green;
}

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

注意：#left和#right可以根据需要缩小，但flex-basis将初始宽度设置为指定值，max-width设置上限。

JSfiddle Demo

为什么“max-width”在以下简单示例中不起作用？

1 个答案: