html - 缩小导致溢出

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 并将绝对位置分配给i 类并从i类中删除float:right并检查此