我有一个 <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
到一个明确的数字,但我怎么知道宽度应该是多少,因为屏幕的尺寸和我的不一样,对吧?
最佳答案
试试这个样式元素,它做你想要的
<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,如何使元素在浏览器缩放时不移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8675602/