Question

当窗口变小时，如何防止图片跳下？我知道我还没有使用float: right，但那是因为内容离导航栏太远了。我是否必须使用另一个div，使其浮动在右侧，然后使用margin auto将内容置于其中？或者有什么方法可以防止浏览器让内容跳过＆＃34;跳过＆＃34;？

＆＃13;

body {
    background-color: #B3B3B3;
}
#links {
    float: left;
    width: 300px;
    height: 200px;
    background-color: #e8e8e8;
}
#rechts {
    float: right;
    width: 500px;
    height: 200px;
    background-color: red;
}

＆＃13;

<div id="links"></div>
<div id="rechts"></div>

＆＃13;

Answer 1

因为您使用 float 。

Float 取决于浏览器的宽度。当浏览器宽度不够时，您的图片会跳下来。

您应该使用属性位置（绝对或固定）

你可以看到这个问题:(我在这个考试中使用固定）

position:fixed;

https://jsfiddle.net/xe7jxwra/

有关CSS中的位置的一些信息：

固定定位元素将从正常流中移除。文档和其他元素的行为类似于固定定位元素不存在
绝对位置元素相对于具有静态位置的第一个父元素定位。如果未找到此类元素，则包含块为 html

在您的请求中，您应将内容的父级设置为“相对”，并将内容设置为“绝对”

Answer 2

您可以修改导航栏并将填充左侧（导航栏的宽度为300px）放到#rechts并删除左侧边距。如下所示

#links {
  float: left;
  width: 300px;
  height: 100%;
  background-color: #e8e8e8;
  box-shadow: 8px 0 10px -4px rgba(0, 0, 0, 0.5);
  position: fixed;
}



#rechts {  
  padding-left: 300px;
  font-size: medium;
}

如何阻止浮动包裹？

2 个答案: