html - 当浏览器宽度不够时，如何防止下一个div跳到底部？

Question

<div style="text-align:center;">
    <div style="display:inline-block; background-color:#CF0; width:500px;">
        Test div A
    </div>

    <div style="display:inline-block; background-color:red; width:500px;">
        Test div B
    </div>

</div>

当浏览器宽度不够时，如何防止下一个div跳到第一个div的底部？

Answer 1

最好的方法是使用 CSS Grid :

<div style="display: grid; grid-template-columns: 1fr 1fr;">
        <div style="background-color:#CF0;">
            Test div A
        </div>
    
        <div>
            Test div B
        </div>
    
    </div>

这会强制两个 div 进入网格列，无论视口(viewport)有多窄，它们都将保持相等的宽度。只需确保在调整浏览器大小时这些 div 中的内容看起来正常即可。