时间戳

首页 > 解决方案 > 双色背景显示两列

html - 双色背景显示两列

问题描述

我有一个表单，它看起来应该有 2 列，每列都有不同的颜色。表单布局没有明确分为 2 个不同的列。如何放置具有 2 种不同颜色的背景？Optimized Tunnel 应该是lightgray，Adjusted Tunnel 是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>

在此处输入图像描述

标签： htmlcssangular-flex-layout

解决方案

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

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

推荐阅读