最大宽度忽略百分比值

kaljak 发表于 Dev

卡拉贾克

我有两行：第一个有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>

看到这个小提琴：https : //jsfiddle.net/7a50j4oa/1/

第一个按钮应有max-width一个百分比百分比。

如果按钮更大（max-width使用），则第二行宽度不会减小。

这种风格是个问题（如果我使用px值，一切都可以正常工作）

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

有什么想法可以实现这一目标吗？flexbox有帮助吗？

提前致谢。

迈克尔·本杰明（Michael Benjamin）

解决方案

将此添加到您的代码：

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

修正的小提琴

解释

在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>