html - 无法将动态数据显示到 column2 HTML 布局中，对齐方式在 HTML 中看起来不太好

Question

我有下面的 HTML 文件，并尝试使用 HTML 和 CSS 创建两列布局，一列我想将其作为请求，另一列是响应列。当我在 Column1 的文本字段中输入值时，它应该在 column2 的 RESPONSE 中返回响应。

风格:

<style>
*{
  box-sizing: border-box; 
 }

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 450px; 
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row:after{

  width: 900px;
}

.submitBtn
{
  margin: 10px;
}

input{
  align-self: center;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
#sbtbtn
{
  font-family:Verdana, Geneva, sans-serif;
  cursor:pointer;
}

</style>

HTML(正文):

 <div class="toolbar" role="banner">
      <img src="https://www.amazonlogo.com/webstatic/en_US/i/buttons/AMZ_logo_h_100x26.png" alt="logo" />
      <span>Welcome</span>
      <div class="spacer"></div>
 </div>
 <div class="content" role="main">
      <!-- Highlight Card -->
      <div class="row">
        <div class="column" style="background-color:#aaa;">
          <h2>REQUEST</h2>
        <div>
          <input type="text" [(ngModel)]="calId" placeholder="Enter CAL ID" class="user_id_text"/>
        </div>
        <div class="submitBtn">
          <input id="sbtbtn" type="submit" (click)="getById(calId)" value="submit"/>
        </div>
        </div>
        <div class="column" style="background-color:#bbb;">
          <h2>RESPONSE</h2>
          <div id="table">
             <table width="100%" class="table">
               <thead>
                <tr>
                 <th>Component Name</th>
                 <th>API Name</th>
                 <th>Error Message</th>
                </tr>
               </thead>
               <tbody>
                <tr *ngFor="let binary of data">
                  <td>{{binary.componentName}}</td>
                  <td>{{binary.apiName}}</td>
                  <td>{{binary.errorMessage}}</td>
                </tr>
               </tbody>
              </table>
             </div>
        </div>
      </div>

    </div>

上面的 *.html 将给出以下输出:

截图一:

当我在文本字段中输入值并单击提交按钮时，它显示如下:

预期结果:

<强>1。我只想获得两个没有背景颜色的 HTML 列布局。

<强>2。我想要 column1 页面中间的文本字段和提交按钮。

<强>3。结果应适合 column2 页面。

<强>4。如果值增加，column2 中应该有侧边栏，所有数据都应该显示在 column2 中。

我是网页设计的新手。有人可以帮助我实现这一目标吗？

注意:这是响应式页面。该设计应该适用于所有设备。

Answer 1

你应该使用 flex，而不是 float。

.row {
    display: flex;
    flex-direction: row; //unnecessary, but if you want you can use it
 }

.column {
    max-width: 50%;
    width: 50%;
 }

这个文本溢出可能是由你的表格引起的。由于您的列如果输入的数据超出其处理能力，则您的列会更宽。

恕我直言，这也可以用 flex 来解决，而不是使用 table。这是 flex-box 指南的链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/