我有一个奇怪的问题。在 250 像素宽的 Bootstrap 容器中的一行中包含多个元素。我希望元素在 250px 列中环绕和填充。几个月前，它曾经在 Chrome 中工作过，但现在不行了！适用于 IE、Safari、Edge。Chrome 中发生了什么，我怎样才能以最小的更改让它在 Chrome 中再次工作？
代码如下：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<style>
.tag {
height: 26px;
width: auto;
border: 1px solid #CAD8F3;
background-color: #DEE7F8;
border-radius: 6px;
line-height: 24px;
text-align: center;
display:inline-block;
padding-right: 10px;
padding-left: 10px;
font-family: Arial, sans-serif;
font-size: 100%;
color: #555555;
margin-bottom: 3px;
cursor: pointer;
}
.tag:hover {
background-color:#b2ccf7;
border: 1px solid #5b7596;
}
</style>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- CODE STYLE -->
<!-- OBJECTIVE IS TO WRAP SPAN ITEMS WITHIN THE 250PX COLUMN WIDTH -->
<!-- WORKS IN IE, SAFARI, EDGE, BUT NOT IN CHROME -->
<!-- *** USED TO WORK IN CHROME *** A FEW MONTHS AGO, BUT NOW GET A LONG TAGLIST THAT FALLS OFF THE PAGE, DOES NOT WRAP WITHIN THE 250PX COLUMN -->
<div id="side" style="width: 250px; margin-left: 50px; margin-top: 0px;">
<div class="container" id="custom_tags_show" style="display:block;">
<span id="tags">
<!-- BELOW IS GENERATED BY SQL COMMAND, WOULD LIKE TO KEEP THIS FORMAT IF POSSIBLE, TO AVOID CHANGING CODE IN MANY PLACES -->
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">food <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">super-natural <span style="font-size:70%;">(3)</span></span> <span class="tag tagHover" data-tag="tag">booboo <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">e <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">new <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">asdf <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">huno <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">two <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag"> <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">dsfg <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">time <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">growth <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">contradictions <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">archaeology <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">family <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">hotmail <span style="font-size:70%;">(2)</span></span> <span class="tag tagHover" data-tag="tag">shocking <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">baby <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">big <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">dd <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">ff <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">four <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">g <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">job <span style="font-size:70%;">(1)</span></span> <span class="tag tagHover" data-tag="tag">sss <span style="font-size:70%;">(1)</span></span>
</span>
</div>
</div>
<br>
<!-- THIS WORKS IN CHROME TO WRAP THE SPAN OBJECTS, BUT THIS IS NOT WHAT IS GENERATED BY THE SQL COMMAND AND WOULD RATHER NOT HAVE TO CHANGE CODE TO ACCOMODATE THIS -->
<div id="side" style="width: 250px; margin-left: 50px; margin-top: 0px;">
<div class="container" id="custom_tags_show" style="display:block;">
<span id="tags">
<span class="tag tagHover" data-tag="tag">jfk <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">food <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">super-natural <span style="font-size:70%;">(3)</span></span>
<span class="tag tagHover" data-tag="tag">booboo <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">e <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">new <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">asdf <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">huno <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">two <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag"> <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">dsfg <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">time <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">growth <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">contradictions <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">archaeology <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">family <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">hotmail <span style="font-size:70%;">(2)</span></span>
<span class="tag tagHover" data-tag="tag">shocking <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">baby <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">big <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">dd <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">ff <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">four <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">g <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">job <span style="font-size:70%;">(1)</span></span>
<span class="tag tagHover" data-tag="tag">sss <span style="font-size:70%;">(1)</span></span>
</span>
</div>
</div>
</body>
</html>
您应该为此使用 flexbox。更多信息在这里：-
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
将此代码段添加到您的代码中：-
#tags{
display: flex;
flex-wrap: wrap;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句