不确定这是否可能，我的要求是这样的——我有一个包含三个 div 的网页，它们被包裹在另一个具有 display:flex 的主 div 中，以便所有三个 div 可以彼此相邻显示.现在的问题是，在中间的 div 中，我从我的数据库中提取了一些数据，它本身包含 DIV。 div 可能没有正确关闭，我:少数可能没有用/div 关闭。因此，当数据出现在中间的 div 上时，第三个 div 有时会超出 flexbox ，从而导致布局出现问题。有什么办法可以避免这种情况吗？希望我能够解释我的问题。
最佳答案
通常，我们绝不会在未对页面进行适当清理以帮助防止 XSS 等安全漏洞的情况下将用户生成的内容注入(inject)页面。请研究 HTML 清理并确保您正在安全地处理此用户生成的内容。
话虽如此，浏览器对格式不正确的标记相当宽容，并会尽力呈现您提供的内容。因此，为防止此用户生成的内容弄乱您的页面，您需要将这些文档与页面的其余部分隔离开来。
与其将此用户生成的 html 直接放在页面中，不如将其作为 srcdoc 提供给 iframe，如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>foo</title>
<style type="text/css" media="screen">
.container {
display: flex;
}
.one, .two, .three {
height 200px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.inline {
border: none;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="one">
<iframe class="inline" srcdoc="<div><h1>my parent was not properly closed</h1>"></iframe>
</div>
<div class="two">
<iframe class="inline" srcdoc="<div><div><h2>nor mine</h2>"></iframe>
</div>
<div class="three">
<iframe class="inline" srcdoc="<div><div><div><h3>neither was mine</h3>"></iframe>
</div>
</div>
</body>
</html>关于html - CSS - 防止动态 DIV 在网站上呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52807061/