浏览器宽度不足时，如何防止下一个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进入网格列，无论视口有多窄，它们都将保持相等的宽度。只需确定调整浏览器大小后在div内的内容正常即可。