Question

因此，默认情况下，如果调整窗口大小，则绝对定位的div将不在视图范围内，而只会在div的左侧。是否有可能达到同样的效果？

我的意思可以在这里找到：http://diabetes.connectionsquad.com

如果您将浏览器窗口的大小调整为1010px以下的任何值，您会注意到导航栏的左侧消失，但如果向右滚动，导航栏的右侧会保持原位。

基本上我的内容div设置为1000px。我的导航栏是1050并且它以具有绝对位置的内容div为中心，因此它挂在每侧的内容div 25px上。当浏览器大小低于1050px时，我希望25px区域崩溃而不可见。默认情况下，浏览器在左侧执行此操作，但在右侧执行此操作。

你能否以同样的方式清除左侧？我尝试过研究它，但我得到了一堆垃圾，因为搜索条件有所偏差。

Answer 1

我无法在Chrome上看到问题。但是，您没有设置top或left，它的上下左侧默认为0,0，因此它附加到其相对父级的左上角。如果你想把它贴在右上角，你可以给它

right: 0;
top: 0; /* Don't need this, it's the default;

Answer 2

通过“不在视野范围内”，我认为你的意思是你的设置的内容宽度。

看看负面定位。的左：-20px;右：-20px

 <style type="text/css">
   div { position:absolute; left:-20px; right:-20px }
 </style>

希望有所帮助，

罗布

Answer 3

您的布局不需要任何绝对定位，它会给您带来怪物头痛。

不是在中心使用固定宽度的div，而是可以做一个灵活的外边距或外边距。

/*Mobile*/
.outermargin {padding:0% 0% }

    /*Screen*/
    @media only screen
    and (min-width : 700px) {
        .outermargin { padding: 0% 7%; }
    }
    @media only screen
    and (min-width : 1400px) {
        .outermargin { padding: 0% 20%; }
    }

根据您的需要使用边距或填充...这种CSS结构是一种习惯后更流畅，更容易的方法。

或者您可以使用以下内容将其集中在一起：

    #mycontainer { 
       margin: 0 auto; max-width:30em; }

如何在窗口调整大小时清除绝对定位的项目？

3 个答案: