双色背景显示两列答案

【问题标题】：Two-color background to show two columns双色背景显示两列
【发布时间】：2019-12-26 06:41:42
【问题描述】：

我有一个表单，它看起来应该有 2 列，每列都有不同的颜色。表单布局没有明确分为 2 个不同的列。如何放置具有 2 种不同颜色的背景？优化隧道应为lightgray，调整隧道为lightblue。谢谢！

<div fxFlex fxLayout="row">
  <div class="wrapper" fxLayout="column" fxFlex="90">
    <div fxLayout="row">
      <div fxFlex="50" fxLayout fxLayoutAlign="center center">
        <h4>Optimized Tunnel Sizing</h4>
      </div>
      <div fxFlex="50" fxLayout fxLayoutAlign="center center">
        <h4>Adjusted Tunnel Sizing</h4>
      </div>
    </div>
    <div fxLayout="row">
      <ul fxLayout="column" fxFlex="55">
        <li class="form-row" fxLayout="row">
          <label>Final Sizing Input</label>
        </li>
        <li fxLayout="row">
          <label class="coil-limit-label" for="fpmLimit">Coil/Filter FPM Limit</label>
          <input class="coil-limit-input" id="fpmLimit" [value]="this.FPMLimit" type="number">
        </li>
      </ul>
    </div>
    <div fxLayout="row" fxLayoutAlign="end">
      <ul fxLayout="column" fxFlex="70">
        <li class="form-row">
          <label fxLayoutAlign="start"></label>
          <label fxLayoutAlign="start">Overrides</label>
        </li>
        <li class="form-row">
          <label for="casingHeightOverride" fxLayoutAlign="start">Casing Height</label>
          <input id="casingHeightOverride" [value]="65" type="number" fxLayoutAlign="start">
        </li>
        <li class="form-row">
          <label for="casingWeightOverride" fxLayoutAlign="start">Casing Width</label>
          <input id="casingWeightOverride" [value]="75" type="number" fxLayoutAlign="start">
        </li>
      </ul>
    </div>
  </div>
</div>

【问题讨论】：

使用渐变背景色。
渐变确实不能有明显的颜色分离。对吗？
They can.

标签： html css angular-flex-layout

【解决方案1】：

是否可以对两个列使用不同的类并为两个类分别设置不同的背景颜色浅灰色和浅蓝色？如下代码

.column1{
  background-color:lightgray;
  width:50%;
  float:left;
  padding:15px;
  box-sizing:border-box;
}
.column2{
  background-color:lightblue;
  width:50%;
  float:left;
  box-sizing:border-box;
  padding:15px;
}

<div fxFlex fxLayout="row">
      <div class="wrapper" fxLayout="column" fxFlex="90">
        <div fxLayout="row">
          <div fxFlex="50" class="column1" fxLayout fxLayoutAlign="center center">
            <h4>Optimized Tunnel Sizing</h4>
          </div>
          <div fxFlex="50" class="column2" fxLayout fxLayoutAlign="center center">
            <h4>Adjusted Tunnel Sizing</h4>
          </div>
        </div>
        <div fxLayout="row"  class="column1">
          <ul fxLayout="column" fxFlex="55">
            <li class="form-row" fxLayout="row">
              <label>Final Sizing Input</label>
            </li>
            <li fxLayout="row">
              <label class="coil-limit-label" for="fpmLimit">Coil/Filter FPM Limit</label>
              <input class="coil-limit-input" id="fpmLimit" [value]="this.FPMLimit" type="number">
            </li>
          </ul>
        </div>
        <div fxLayout="row" fxLayoutAlign="end"  class="column2">
          <ul fxLayout="column" fxFlex="70">
            <li class="form-row">
              <label fxLayoutAlign="start"></label>
              <label fxLayoutAlign="start">Overrides</label>
            </li>
            <li class="form-row">
              <label for="casingHeightOverride" fxLayoutAlign="start">Casing Height</label>
              <input id="casingHeightOverride" [value]="65" type="number" fxLayoutAlign="start">
            </li>
            <li class="form-row">
              <label for="casingWeightOverride" fxLayoutAlign="start">Casing Width</label>
              <input id="casingWeightOverride" [value]="75" type="number" fxLayoutAlign="start">
            </li>
          </ul>
        </div>
      </div>
    </div>

【讨论】：

我希望颜色填满整个列。