Question

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

代码：

<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 Queries

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

Answer 2

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

除非达到某个点，否则如何将div放在右下角

2 个答案: