最大宽度忽略百分比值

Question

最大宽度忽略百分比值

6

我有两行：第一行有5个按钮，第二行有一个div，应该与按钮的长度相同。

这是我的代码：

BODY * {
  box-sizing: border-box;
}
.container {
  background: blue;
  width: 100%;
  height: 66px;
  position: relative;
}
.logo {
  background: red;
  width: 65px;
  height: 65px;
}
.rightcontainer {
  position: absolute;
  right: 0;
  top: 0;
  background-color: green;
}
.buttons > DIV {
  display: inline-block;
  padding: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.buttons > DIV:first-child {
  max-width: 30%;
}
.search {
  width: 100%;
  background-color: yellow;
}

OKAY:
<div class="container">
  <div class="logo"></div>
  <div class="rightcontainer">
    <div class="buttons">
      <div>Buttons 1</div>
      <div>Buttons 2</div>
      <div>Buttons 3</div>
      <div>Buttons 4</div>
    </div>
    <div class="search">
      Search
    </div>
  </div>
</div>
Not okay: The gap between button 4 and border should be gone
<div class="container">
  <div class="logo"></div>
  <div class="rightcontainer">
    <div class="buttons">
      <div>Buttons 1 long long long long</div>
      <div>Buttons 2</div>
      <div>Buttons 3</div>
      <div>Buttons 4</div>
    </div>
    <div class="search">
      Search
    </div>
  </div>
</div>

请看这个fiddle：https://jsfiddle.net/7a50j4oa/1/ 第一个按钮应该根据百分比设置max-width。

如果按钮变大(max-width被使用)，第二行的宽度不会被缩小。

此样式是问题所在(如果使用像素值，一切都正常)。

.buttons > DIV:first-child
{
  max-width:30%;
}

您有什么想法可以实现这个功能吗？flexbox会有帮助吗？

提前致谢。

- kaljak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

解决方案

将此代码添加到您的代码中：

.rightcontainer {
  width: 45%; /* or another percentage that works for you */
}

修订版Fiddle

解释

您代码中的max-width: 30%无法生效，因为您没有为包含块定义宽度。

这是您包含块的代码：

.rightcontainer {
  position: absolute;
  right: 0;
  top: 0;
  background-color: green;
}

这是您的按钮后代的代码：

.buttons > DIV:first-child { max-width: 30%; }

以下是规范内容：

10.4 最小和最大宽度：min-width 和 max-width

这两个属性允许作者将内容宽度限制在一定范围内。

百分比值

指定用于确定使用值的百分比。该百分比是相对于生成框的包含块的宽度计算的。

这就是为什么您的max-width可以使用像素而不是百分比值的原因。

BODY * {
  box-sizing: border-box;
}
.container {
  background: blue;
  width: 100%;
  height: 66px;
  position: relative;
}
.logo {
  background: red;
  width: 65px;
  height: 65px;
}
.rightcontainer {
  position: absolute;
  right: 0;
  top: 0;
  background-color: green;
  width: 45%;               /* NEW */
}
.buttons > DIV {
  display: inline-block;
  padding: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.buttons > DIV:first-child {
  max-width: 30%;
}
.search {
  width: 100%;
  background-color: yellow;
}

<div class="container">
  <div class="logo"></div>
  <div class="rightcontainer">
    <div class="buttons">
      <div>Buttons 1</div>
      <div>Buttons 2</div>
      <div>Buttons 3</div>
      <div>Buttons 4</div>
    </div>
    <div class="search">Search</div>
  </div>
</div>
Not okay: The gap between button 4 and border should be gone
<div class="container">
  <div class="logo"></div>
  <div class="rightcontainer">
    <div class="buttons">
      <div>Buttons 1 long long long long</div>
      <div>Buttons 2</div>
      <div>Buttons 3</div>
      <div>Buttons 4</div>
    </div>
    <div class="search">Search</div>
  </div>
</div>