Question

所以我想做的是将两个textarea并排放置，而我尝试使用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。

“显示：表格列”未提供用于制作列式布局的机制（例如，具有多列的报纸页面，其中内容可以从一列流向下一列）。

相反，“ 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>

div表不起作用

2 个答案: