Div表不工作

Question

所以我要做的是把两个文本放在一起，我试着用div表来做，但是表和它的部分被推到了左上角，那么我做错了什么呢？有没有更好的方法来做这件事？

​

<head>
  <title>Lost</title>
  <style>
    * {
      padding: 0px;
      margin: 0px;
      border: 1px solid white;
    }
    
    body {
      background: black;
    }
    
    textarea {
      border: 1px solid white;
      background: black;
      width: 50%;
      height: 500px;
    }
    
    #table {
      display: table;
      width: auto;
    }
    
    #tr {
      display: table-row;
      width: auto;
    }
    
    #tc {
      display: table-column;
      width: 50%
    }
  </style>
</head>

<body>
  <div id="table">
    <div id="tr">
      <div id="tc"><textarea readonly></textarea></div>
      <div id="tc"><textarea readonly></textarea></div>
    </div>
  </div>

  <body>
    <script>
    </script>

​

Answer 1

你可以(最好)使用flexbox来解决这个问题。只需几行代码，它就可以解决语义上正确的实现问题：

.box {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

.box-textarea {
  flex: 0 0 50%;
}

阅读有关flexbox at MDN的更多信息。

此外，请确保您已在代码中添加了box-sizing: border-box;，否则由于边框的原因，宽度将为100% + 1px。

​

<head>
  <title>Lost</title>
  <style>
    * {
      padding: 0px;
      margin: 0px;
      border: 1px solid white;
      box-sizing: border-box;
    }
    
    body {
      background: black;
    }
    
    textarea {
      border: 1px solid white;
      background: black;
      width: 100%;
      height: 500px;
    }
    
    .box {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
    }
    
    .box-textarea {
      flex: 0 0 50%;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box-textarea"><textarea readonly></textarea></div>
    <div class="box-textarea"><textarea readonly></textarea></div>
  </div>

  <body>
    <script>
    </script>

​

Answer 2

你当然可以按照@Roy的建议使用Flexbox。

"display: table- column“不提供制作栏目布局的机制(例如，具有多个栏目的报纸页面，其中内容可以从一个栏目流动到下一个栏目)。

相反，" table -column“只设置应用于表行中相应单元格的属性

使用"table-cell“，如果这是你想要的

W3 Tables

​

<head>
  <title>Lost</title>
  <style>
    * {
      padding: 0px;
      margin: 0px;
      border: 1px solid white;
    }
    
    body {
      background: black;
    }
    
    textarea {
      border: 1px solid white;
      background: black;
      height: 500px;
    }
    
    #table {
      display: table;
    }
    
    #tr {
      display: table-row;
    }
    
    #tc {
      display: table-cell;
      width: 50%
    }
  </style>
</head>

<body>
  <div id="table">
    <div id="tr">
      <div id="tc"><textarea readonly></textarea></div>
      <div id="tc"><textarea readonly></textarea></div>
    </div>
  </div>

  <body>
    <script>
    </script>

​