Question

我有一个表格，看起来像它有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>

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

两色背景显示两列

1 个答案: