为什么我的桌子不是水平相邻的？

Question

当我希望它们水平排列时，我的桌子却垂直排列。

我试过使用 flex-container，但它似乎没有任何作用。

<div class = "flex-container">   
    <div>   
        <h2>Types of Cards</h2>
        <div>
            <table></table> 
        </div>
        <div>
            <table></table>
        </div>
        <div>
            <table></table>
        </div>
        <div> 
            <table></table>
        </div>
    </div>   
</div>

Answer 1

单独添加 class 名称而不添加任何 CSS 不会有任何效果。

在您的 HTML 中，每个 table 元素都位于 div 中。 divs 和 tables 的默认 display 设置是 block，这意味着它们之后的任何元素将显示在它们下面，而不是它们旁边。

可能的解决方法是将 CSS display 设置为 inline，每个 table 和 div 都包含一个 table。我添加了一些示例内容以更好地可视化输出：

.table-div {
    display: inline;
}

/*Targets all tables that are inside a div of class table-div*/
.table-div table {
    display: inline;
}

<div>           
<h2>Types of Cards</h2>

    <div class="table-div">
      <table>
          <tr>
              <td>Something1</td>
              <td>Something1</td>
          </tr>
      </table> 
    </div>

    <div class="table-div">
      <table>
          <tr>
              <td>Something2</td>
              <td>Something2</td>
          </tr>
      </table> 
    </div>

    <div class="table-div">
      <table>
          <tr>
              <td>Something3</td>
              <td>Something3</td>
          </tr>
      </table> 
    </div>

    <div class="table-div">
      <table>
          <tr>
              <td>Something4</td>
              <td>Something4</td>
          </tr>
      </table> 
    </div>
</div>

为什么我的桌子不是水平相邻的？

Why aren't my tables next to each other horizontally?

html

css

flexbox

css-tables