css - 在非响应式 Web 应用程序中使用 Less 优化格式化由 3 部分组成的行

Question

我正在开发一个无响应的网络应用程序(始终以全高清模式运行)。 在我的网站中，我有一个由 3 个区域组成的顶部栏:

左:1-8 个按钮之间 中间:地址栏(面包屑 - 始终是最宽的元素) 右:一个按钮

目前，我的 .less 文件中有这个:

.partLeft {
  float: left;
  min-width: 75px;
}

.partMiddle {
  width: calc(~"100% - 400px");
  float: left;
}

.partRight {
  float: right;
  min-width: 75px;
}

虽然这工作正常，但我想它可以得到更好更好的解决。如果中间总是使用 LEFT 和 RIGHT 之间的所有可用空间，那就太好了。

我正在使用 Java 的官方 LESS CSS 编译器，版本 1.7.0.1.1 http://github.com/marceloverdijk/lesscss-java

Answer 1

您的问题可以使用基本的 flexbox 来解决。通过将 display: flex 添加到容器元素并将 flex: 1 属性添加到“地址栏”区域。不需要 float 和 calc()。 flex 属性将使 partMiddle 元素占用 partLeft 和 partRight 之间的任何剩余空间。

标记:

<div class="container">
  <div class="partLeft">Left (Buttons)</div>
  <div class="partMiddle">Middle (Address Bar)</div>
  <div class="partRight">Right (Button)</div>
</div>

用于说明的 CSS(LESS 和 Flexbox):

.container {
  display: flex;

  .partLeft, 
  .partRight {
    min-width: 75px;
  }

  .partMiddle {
    flex: 1;
  }
}

Working Codepen

一个更干净的 CSS 版本(将与 LESS 一起工作，但最终会生成一个更小的 CSS 文件)是:

.container {
  display: flex;
}

.partLeft, 
.partRight {
  min-width: 75px;
}

.partMiddle {
  flex: 1;
}

注意:这也包括响应的额外好处，即使 OP 不需要它。