Question

当我调整浏览器窗口的大小时，我的div元素向左移动但我希望它们在我这样做的时候留在一个地方。如何在调整浏览器窗口大小的同时使div元素保持在一个位置？

<div style="background:red; width:30px; height:30px">

</div>

Answer 1

<div style="background:red; width:30px; height:30px position: absolute;
            top:/* pixels from top of screen*/ 30px;
            left:/* pixels from left side of screen*/100px;">

</div>

Answer 2

你有几个选项可以实现你想要的，但你将使用哪一个取决于你的代码的其余部分。

你绝对可以定位容器，但在这种情况下，包含这些div的父元素也有一个非静态定位非常重要。最常用的方法之一是定义父元素的相对位置，然后绝对定位内部元素。

这是一个例子。

<强> HTML

<div class="wrapper">
    <div class="div_1">
        <!-- DIV 1 content -->
    </div>
    <div class="div_2">
        <!-- DIV 2 content -->
    </div>
</div>

<强> CSS

.wrapper {
    position:relative;
}

.div_1 {
    position:absolute;
    top:10px;
    left:20px;
}
.div_2 {
    position:absolute;
    bottom:10px;
    left:20px;
}

Answer 3

使用vertical-align，padding，position属性.. 对于Position属性，请参阅以下链接 enter link description here 有关Padding属性，请参阅以下链接enter link description here 有关垂直对齐属性，请参阅以下链接enter link description here

<div style="background:red; width:30px; height:30px;vertical-align:top;padding:0px 0px 0px 0px">
</div>

让div不要继续减少浏览器屏幕

3 个答案: