Question

我得到一个<div>，其中包含2 <p> 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>

当浏览器的视图最大化时，它看起来像这样：

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

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

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

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

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

如何在Css中完成？

PS 我想要完成这项工作的唯一方法是将<div>块width设置为显式数字，但我怎么知道宽度应该是多少，因为屏幕＆＃39 ;大小和我的不一样吧？

Answer 1

检查this jsFiddle。我将框宽度改为％以与容器匹配，并使用min-width属性强制它，而不是低于某个宽度。

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

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

希望它有所帮助！

Answer 2

尝试这个样式元素，它可以做你想要的事情

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

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

2 个答案: