图像左侧和右侧表示动态内容宽度

Question

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

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% 时。
*我还没有测试过，试着玩数字;-）