当内容溢出浏览器窗口时，用 div 替换 html 表格布局
Posted
技术标签:
【中文标题】当内容溢出浏览器窗口时，用 div 替换 html 表格布局【英文标题】：Replace html table layout with divs when content overflows browser window 【发布时间】：2021-04-07 17:33:31 【问题描述】：一段时间以来，不鼓励使用表格进行 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>【问题讨论】：
【参考方案1】：因为它不是表格（table-layout），所以它不会收缩/扩展以适应其内容。
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 表格布局的主要内容，如果未能解决你的问题，请参考以下文章
html js 或者css怎么做到隐藏滚动条，但是依旧可以滚动？