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;
}

我也在尝试在浏览器中放大/缩小后将两个 div 设置在同一行中 (CTRL +/CTRL -)。问题不在于将两个 div 设置在同一行，而是放大/缩小，当我放大/缩小具有长内容的 div 时，高度和短内容的 div 越来越长内容保持原样。有没有办法为每个 Action (放大/缩小)在同一行中设置两个 div。

Answer 1

我已经更新了你的 fiddle :http://jsfiddle.net/TXSfN/2/

为 2 个 div 设置一个 max-height，然后 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;
}