Question

不鼓励使用表格进行 html 布局已有一段时间了。我正在创建一个网页，其中包含不同数量的元素行。每行应根据最宽行的宽度居中。我可以使用如下所示的表格来完成此操作。

我尝试用 div 替换它，只要最宽的行不比浏览器窗口宽，它就可以工作。在这种情况下，如何使 div 版本与 table 版本相同？谢谢。

表格版

<html>
<head>
<style>
  div.box {
      display: inline-block;
      width:300px;
      height:100px;
      margin:10px;
  }
  div.red {
      background:red;
  }
  div.green {
      background:green;
  }
  td.oneline {
      white-space: nowrap;
      text-align: center;
  }
</style>
</head>
<body>
  <table>
    <tr>
      <td class='oneline'>
        <div class='box green'></div>
        <div class='box green'></div>
      </td>
    </tr>
    <tr>
      <td class='oneline'>
        <div class='box red'></div>
        <div class='box red'></div>
        <div class='box red'></div>
        <div class='box green'></div>
        <div class='box green'></div>
        <div class='box red'></div>
        <div class='box red'></div>
        <div class='box red'></div>
      </td>
    </tr>
  </table>
</body>
</html>

Div 版本

<html>
<head>
  <style>
  div.box {
      display: inline-block;
      width:300px;
      height:100px;
      margin:10px;
  }
  div.red {
      background:red;
  }
  div.green {
      background:green;
  }
  div.container {
      white-space: nowrap;
      text-align: center;
  }
  </style>
</head>
<body>
  <div class='container'>
    <div>
      <div class='box green'></div>
      <div class='box green'></div>
    </div>
    <div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box green'></div>
      <div class='box green'></div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box red'></div>
    </div>
  </div>
</body>
</html>

Answer 1

因为它不是表格（表格布局），所以它不会缩小/扩展以适应其内容。

2 个选项：

将 display:table; 设置为 .container
将 width:max-content 设置为 .container ;

这两个规则（一个或另一个）都将允许容器比视口的宽度或其块父级更宽。

带宽度的演示：

<html>
<head>
  <style>
  div.box {
      display: inline-block;
      width:300px;
      height:100px;
      margin:10px;
  }
  div.red {
      background:red;
  }
  div.green {
      background:green;
  }
  div.container {
      white-space: nowrap;
      text-align: center;
      width:max-content;
  }
  </style>
</head>
<body>
  <div class='container'>
    <div>
      <div class='box green'></div>
      <div class='box green'></div>
    </div>
    <div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box green'></div>
      <div class='box green'></div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box red'></div>
    </div>
  </div>
</body>
</html>

带显示的演示

<html>
<head>
  <style>
  div.box {
      display: inline-block;
      width:300px;
      height:100px;
      margin:10px;
  }
  div.red {
      background:red;
  }
  div.green {
      background:green;
  }
  div.container {
      white-space: nowrap;
      text-align: center;
      display:table;
  }
  </style>
</head>
<body>
  <div class='container'>
    <div>
      <div class='box green'></div>
      <div class='box green'></div>
    </div>
    <div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box green'></div>
      <div class='box green'></div>
      <div class='box red'></div>
      <div class='box red'></div>
      <div class='box red'></div>
    </div>
  </div>
</body>
</html>

这两条规则都暗示了不同的行为，请寻找最接近您需求的规则。

当内容溢出浏览器窗口时，用 div 替换 html 表格布局

1 个答案: