html - 除非达到某个特定点，否则如何将 div 定位在右下角

Question

嗨，这是一个简单的菜鸟问题，但无论如何我都必须问它。看我的小提琴：

http://jsfiddle.net/jjalbert/xXdev/

代码：

<h1>Hi!</h1>
<p>Some more text</p>
<div id="bottomcorner"></div>

#bottomcorner {
    position: fixed;
    bottom:0;
    right:0;
    background-color:red;
    width: 100px;
    height: 100px;
}    

h1 {
    color: green;
    font-size: 20px;
    width: 200px;
    font-weight: bold;
}

p {
    color: blue;
    width: 230px;
}    

我有一个固定在右下角的元素，但是一旦创建了某个浏览器宽度，我希望它保持在静态位置，这样它就不会开始干扰它左侧的内容。

所以在我的小提琴中，一旦浏览器窗口大约 330px 宽，我希望红色框保持在原位，并且从浏览器的角落变得不固定。

Answer 1

查看 CSS 媒体查询。这应该可以完成工作。

CSS 媒体查询

@media all and (min-width: 300px) {
    ...css rules here...
}

Answer 2

您可以将其浮动并放在具有最大宽度的 div 内，然后将 div 的位置固定在底部而不是右下角的红色框。