html，如何在浏览器缩放时使元素不移动？

我得到一个

包含2个

s：

#in .html file
<style type="text/css">
    div.box {
        position: relative;
        height: 30px;
    }
    div.box p#id1 {
        position: absolute;
        margin-left: 0px;
    }
    div.box p#id2 {
        position: absolute;
        margin-right: 0px;
    }
</style>
...
<div class="box">
    <p id="id1">ID1</p>
    <p id="id2">ID2</p>
</div>

当我缩小浏览器时，它看起来是这样的（，这不是我想要的内容）：

当浏览器缩放时，右侧的内容（

ID2

）会移开。 我所期望的是，当我缩小浏览器时，右侧的内容应该被忽略，如下所示：

-------------------------------------------------------------
|                                                           |
|ID1                                                     ID2|
|                                                           |
-------------------------------------------------------------

-------------------------------------------------------------
|                                                           |
|ID1                                                     ID2|
|                                                           |
-------------------------------------------------------------
-----------------------------------------------------------
|                                                         |
|ID1                                                     I|
|                                                         |
-----------------------------------------------------------
---------------------------------
|                               |
|ID1                            |
|                               |
---------------------------------

如何在Css中实现它

PS 我想做这项工作的唯一方法是将

块的

宽度设置为一个明确的数字，但是我怎么知道宽度应该是多少，因为屏幕的大小与我的不一样，对吗？
检查jsiddle。我将框的宽度更改为%以与容器匹配，并使用“最小宽度”属性将其强制为，而不是低于某个宽度

    div.box {
    position: relative;
    height: 30px;
    width: 90%;
    min-width: 500px;
    }
    div.box p#id1 {
    float: left;       
    }
    div.box p#id2 {     
    float: right;
    }

这可能不是你想要的，但我相信这会给你一些想法

希望有帮助
 试试这个样式元素，它可以满足您的需要

    <style type="text/css">
        div.box {
            position: relative;
            height: 30px;
            min-width:400px;
        }
        div.box p#id1 {
            position: relative;
            margin-left: 0px;
            display:inline-block;
            float:left;
            clear:none;
        }
        div.box p#id2 {
            position: relative;
            margin-right: 0px;
            display:inline-block;
            float:right;
            clear:none;
        }
    </style>


分区箱{
位置：相对位置；
高度：30px；
最小宽度：400px；
}
分区箱p#id1{
位置：相对位置；
左边距：0px；
显示：内联块；
浮动：左；
明确：无；
}
分区箱p#id2{
位置：相对位置；
右边距：0px；
显示：内联块；
浮动：对；
明确：无；
}
您能解释一下
和
中的
相对
吗？我不太明白。position absolute作用于窗口，但position relative作用于设置为position absolute或position relative的最早祖先请记住，如果答案解决了您的问题，请指明答案被接受，或者进行评论，以便我们能提供更好的答案。@lostinplace，我绝对会的。
    <style type="text/css">
        div.box {
            position: relative;
            height: 30px;
            min-width:400px;
        }
        div.box p#id1 {
            position: relative;
            margin-left: 0px;
            display:inline-block;
            float:left;
            clear:none;
        }
        div.box p#id2 {
            position: relative;
            margin-right: 0px;
            display:inline-block;
            float:right;
            clear:none;
        }
    </style>