Question

我有一个带有以下css的主要内容div

width: 80%;
max-width: 800px;
margin: 0 auto;
border: 1px solid black

现在我想在我的上下文框的任一侧放置一个背景图像/ div，它在页面上保持固定并被页面剪切。目的是添加左右显示的图像。

它应该看起来像这样：

              ------------------
              |                |
           ---|                |---
           |  |      Main      |  |
           |  |    Content     |  |
           |  |                |  |

            ^                    ^
             \--------------------\- Should these two side containers reach outside of the viewport they should be cliped. Also these should have a fixed position.

这可以通过纯css（没有Javascript）来实现吗？或者，如果我愿意放弃变量主内容宽度，可以用纯CSS实现吗？

Answer 1

<div class="main">
 <div class="left"></div>
 <div class="right"></div>
</div>

.main{
 position: relative;
 width: 80%;
 max-width: 800px;
 margin: 0 auto;
 border: 1px solid black
}
.left{
 position: absolute;
 right: 100%;
 width: 12.5%;
  height 100%;
}
.right{
  position: absolute;
  left: 100%;
  width: 12.5%;
  height 100%;
}

类似的东西应该是你需要知道的： *子元素定位元素宽度和高度％取第一个定位父元素尺寸为100％。
*我没有测试，尝试使用数字; - ）

图像左右为动态内容宽度

1 个答案: