当内容溢出浏览器时用 div 替换 html table 布局 window

Question

使用 tables 作为 html 布局已经有一段时间了。我正在创建一个网页，其中包含多行不同数量的元素。每行应根据最宽行的宽度居中。我可以用 table 来做到这一点，如下所示。

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

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

因为它不是 table（table-布局），所以它不会 shrink/expand 以适合其内容。

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 table 布局 window

Replace html table layout with divs when content overflows browser window

html

css

html-table

overflow