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

Question

我有一个 <div>包含 2 <p>小号:

#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>

当浏览器的 View 最大化时，它看起来像这样:

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

当我缩小浏览器时，它看起来像这样(这不是我想要的):

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

当浏览器缩放时，右侧的内容 ( ID2 ) 会移开。我期望的是，当我缩小浏览器时，右侧的内容应该被排除在外，如下所示:

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

如何在 Css 中实现？

附言我想到做这项工作的唯一方法是设置 <div> block 的 width到一个明确的数字，但我怎么知道宽度应该是多少，因为屏幕的尺寸和我的不一样，对吧？

Answer 1

试试这个样式元素，它做你想要的

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