html - 双色背景显示两列

Question

我有一个表单，通过在每列上使用不同的颜色，它看起来应该有 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>

Answer 1

是否可以为两列使用不同的类，并为两个类分别设置不同的背景颜色，分别为 lightgray 和 lightblue？像下面的代码

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