左邊預留200px出來#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: left; top: 0; right: 0; left: auto; }
时间: 2024-03-23 08:44:08 浏览: 61
要让 `#main` 元素在左侧留出 200 像素的空白,您可以将 `position` 属性的值改为 `fixed`,同时将 `left` 属性的值设置为 `200px`,`right` 属性的值设置为 `0`。这样,`#main` 元素就会在屏幕左侧留出 200 像素的空白。新的代码如下所示:
```
#main {
height: 500px;
overflow-y: scroll;
max-width: 100%;
margin: auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
position: fixed;
top: 0;
left: 200px;
right: 0;
}
```
请注意,如果您希望 `#main` 元素与屏幕左侧和右侧留出一定的空白,可以通过调整 `padding-left` 和 `padding-right` 属性的值来实现。
相关问题
#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; left: calc(50% - 430px); }
如果您想让 `#main` 元素在屏幕中间留出 210 像素的空白,可以将 `left` 属性的值改成 `calc(50% - 550px)`,其中 `550px` 是 `#main` 元素的宽度加上 210 像素的一半。这样,`#main` 元素就会在屏幕中间留出 210 像素的空白。新的代码如下所示:
```
#main {
height: 500px;
overflow-y: scroll;
max-width: 100%;
margin: auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
position: fixed;
top: 0;
left: calc(50% - 550px);
}
```
请注意,您需要根据 `#main` 元素的实际宽度和屏幕宽度来调整 `calc()` 函数中的数值。如果您的 `#main` 元素的宽度为 860 像素,则需要将 `550px` 更改为 `(860px + 210px) / 2 = 535px`,即 `calc(50% - 535px)`。
左邊我需要留出210px#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; right: 0; }
如果您想要让 `#main` 元素在屏幕中间留出 210 像素的空白,可以使用 `calc()` 函数来计算 `left` 属性的值。具体来说,您可以将 `left` 属性的值设置为 `calc(50% - 560px)`,其中 `560px` 是 `#main` 元素的宽度加上 210 像素的一半。这样,`#main` 元素就会在屏幕中间留出 210 像素的空白。新的代码如下所示:
```
#main {
height: 500px;
overflow-y: scroll;
max-width: 100%;
margin: auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,.1);
position: fixed;
top: 0;
left: calc(50% - 560px);
}
```
请注意,`calc()` 函数只能在 CSS3 中使用,如果您需要支持较旧的浏览器,请考虑使用其他方法来实现相同的效果。
阅读全文