在调整大小时使div自动向左移动

Question

使用css，当浏览器窗口调整大小时，如何使div逐渐移动到最左边的位置，即触摸左侧屏幕边框？这意味着，当浏览器调整大小时，div应该继续向左移动，直到它触及屏幕浏览器左边框。

#element {
  position: absolute;
  top : 40px;
  left : 300px;
 }

如果我提供百分比值，对于左边，它会逐渐向左移动，但仍保持该百分比。我希望它逐渐减少到0或其他更低的值，以便右侧有更多的空间。

Answer 1

所以你有两个选择。最顺畅的＃34;将使用一个百分比，然后在你决定的某个点，一个特定的最小屏幕宽度，你将放0％或删除浮动或你想做的任何事情。有一点可以解决这个问题。但是如果你把它做成一个很小的分辨率，比如手机在风景中使用的分辨率，没有人会看到它突然出现。为了实现这一点，@ Raunak Kathuria说并使用CSS媒体查询，如果你需要一个我可以写一个的例子，但它非常基本，并且到处都有教程。只需搜索CSS媒体查询。

您还有其他选择是使用一系列媒体查询，每个查询都将div移动到不同的位置。这不是渐进的，而是在某些屏幕尺寸上。

许多人在进行自适应设计时，包括我自己，都会对页面的外观感到满意，并在实际调整大小时采取行动。实际上，这并不重要。我认为绝大多数人在查看网站时都不会调整浏览器的大小。他们浏览并继续前进。因此，只要您的页面看起来像您喜欢的任何屏幕尺寸，渐变运动就无关紧要了。这就是为什么我个人更喜欢媒体查询到灵活布局的原因。它提供了我想要的像素控制。