缩小导致溢出

Question

看图片

这是我用标准分辨率（1386 x 788）看到的。观察当我尝试缩小Internet Explorer时会发生什么：

为什么会这样？怎么解决？这是代码：

#pages{
    width: 190px;
    height: 100px;
    border: 1px solid black;
}

.p {
    float:left;
    width: 100px;
    height: 100px;
}

.i {
    float: right;
    width: 80px;
    border: 1px solid black;
}

<div id="pages">
    <img class="p" src="a.jpg"/>
    <div class="i"> Lorem... </div>
</div>

Answer 1

试试这个Css：

#pages{
width: 190px;
height: 100px;
border: 1px solid black;
position:relative;
}

.i{
width: 80px;
border: 1px solid black;
position:absolute;
right:0;
}

将职位提供给 #pages ＆amp;绝对位置上课 i ＆amp;从类i中删除 float：right 并检查此