css - ZOOM IN 前后同一行中的两个 div

Question

我在这里有两个 div：http: //jsfiddle.net/TXSfN/
CSS 代码：

#div1{
    background-color: red;
    display: inline-block;
    width: 50%
}
#div2{
    background-color: blue;
    width: 20%
    display: inline-block;
    height: 263px;
    float: right;
}

在浏览器中放大/缩小（CTRL + / CTRL -）之后，我也试图将两个 div 设置在同一行中。问题不在于将两个 div 设置在同一行中，而在于放大/缩小，当我放大/缩小具有长内容的 div 时，高度会变得越来越长，而具有短内容的 div 会变得越来越长内容保持原样。有没有办法为每个动作（放大/缩小）将两个 div 设置在同一行。

Answer 1

我已经更新了你的小提琴：http: //jsfiddle.net/TXSfN/2/

将 max-height 设置为 2 个 div，并且 overflow-y: auto 第一个 div 以保持高度相同并且不让内容强制它变大。

CSS

#div1{
    background-color: red;
    display: inline-block;
    height: 250px;
    overflow-y: auto;
    max-height: 250px;
    width: 50%
}

#div2{
    background-color: blue;
    width: 20%
    display: inline-block;
    height: 250px;
    max-height: 250px;
    float: right;
}