我可以在 React 中使用带有 CSS 的 JSX 创建 2 列而不是 3 列

Question

我只是想创建 3 列带有关联标签的文本字段。我可以轻松创建 2 列，但此代码将第三个文本字段放在下面的一行中：

 <div className={styles.threecol}>
       <div className={styles.col1}>
             <div style={{width: '150px'}}>
                 <Label className={styles.questionTitle}>Record No.</Label>
                     <TextField
                         value={this.state.Title}
                         disabled={true}
                      />
                   </div>
                 </div>

              <div className={styles.threecol}>
                 <div className={styles.col2}>  

                  <div style={{width: '150px'}}>             
                
                    <Label className={styles.questionTitle}>Room</Label>
               
                    <TextField
                      value={this.state.Room}
                      onChange={this._onRoomChange}
                    />
                    <br />
                  </div>
                </div>
               
              </div>
              <div className={styles.threecol}>
                 <div className={styles.col3}>   

                  <div style={{width: '150px'}}>               
           
                    <Label className={styles.questionTitle}>Room</Label>
              
                    <TextField
                      value={this.state.Room}
                      onChange={this._onRoomChange}
                    />
                    <br />
                  </div>
                </div>
              </div>
             </div>
            </div>
          </div>

CSS:

.threecol {
      overflow: hidden
    }
    
    .threecol .col1 {
      width: 22%
    }
    .threecol .col2 {
      width: 22%
    }
    .threecol .col3 {
      width: 22%
    }
    
    .threecol .col1 {
      float: left;
    }
    
    .threecol .col2 {
      float: none;
    }
    .threecol .col3 {
      float: right;
    }
    
    .threecollabel {
      font:'24px';
      font-weight: 'bold';
      display: block;
    }

    .threecol .co1Sm {
      float: left;
      width: 200px;
      height: 30px;
    }

我可以使用与 CSS 和 JSX 相同的技术显示两列，但不是 3 列。这是适用于 2 列的 JSX：

   <div>
      <div>
        <Label className={styles.questionTitle1}>Details</Label>
       </div>
        <div className={styles.twocol}>
          <div className={styles.col1}>
               
             <div style={{width: '150px'}}>
               <Label className={styles.questionTitle}>Record No.</Label>
                  
                 <TextField
                   value={this.state.Title}
                   disabled={true}
                  />
                </div>
               </div>
              <div className={styles.twocol}>
                 <div className={styles.col2}>               
                 
                  <div style={{width: '150px'}}>
                    <Label className={styles.questionTitle}>Room</Label>
                 
                    <TextField 
                      value={this.state.Room}
                      onChange={this._onRoomChange}
                    />
                    <br />
                  </div>
                </div>
              </div>
             </div>
            </div>

我不想使用表格。

T

Answer 1

@Tom 您正在关闭 html 中的多个 div 标签。然后您将 float: none 添加到第二列样式 col2。可能是这个问题。

.threecol .col2 {
  float: left;
  text-align: center;
}

参考：https://stackblitz.com/edit/react-3urqg6?file=index.html

我可以在 React 中使用带有 CSS 的 JSX 创建 2 列而不是 3 列

I can create 2 columns but not 3 columns using JSX with CSS in React

css

jsx

reactjs

spfx