html - 在网站正文中围绕 Flash 内容在 CSS 中创建左右间隔符

Question

选项 1

下面是我正在尝试构建的站点的总体布局。绿色区域是网站的页眉和页脚。蓝色区域是 flash 内容，其高度会根据显示的内容而变化。红色区域是我试图构造的两个间隔符，它们限制了 Flash 内容，它们的大小根据浏览器的宽度而变化，但 Flash 内容的宽度保持不变。

我被挂断的地方是如何在 css 中创建这些空间。我假设我会使用 CSS 来正确解决这个问题。

例如，在 CSS 文件中，我需要设置背景颜色和高度，因为它们始终是静态的，只有宽度发生变化。

#left spacer {
    background-color: #881E42;
    height: 46px;
    float: left;
}
#right spacer {
    background-color: #881E42;
    height: 46px;
    float: right;
}

如何将左右间隔符的宽度设置为(浏览器宽度 - Flash 内容宽度)/2其中 Flash 内容的宽度静态为 920 像素。

我不确定如何控制间隔物的宽度。

不知何故，间隔符的宽度需要设置为(浏览器宽度 - Flash 内容宽度)/2在此示例中，Flash 内容的静态宽度为 920 像素，浏览器宽度是可变的。所以说浏览器宽度是 1920px，而不是每个间隔的大小是每个容器 500px。我还将每个间隔符的最小宽度设置为 20px，以便在浏览器宽度低于特定阈值时显示它们。

选项 2

我的另一个想法是创建一个包含 flashcontent 的容器

<div id="container">
*Flash content scipt goes here
</div>

我不知道该怎么做，即使可能，但它会起作用

#Container{
        psudo code
        Color 1: #881E24
        Color 1 height: 25px
        Color 1 width: 100%
        background-color: #FFFFFF;
        height: auto;
        width: 100%;
        text-align: center;
    }

Answer 1

这是一个有效的 JSFIDDLE

更新代码。

代码示例，

  <div id="header">
</div>

<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>

<div class="clear"></div>
<div id="footer">
</div>


    CSS
    #header {
    width: 100%;
    height: 50px;
    background-color: green;
}

.clear {clear: both;}

#one {
    width: calc((100% - 250px)/2);
    height: 10px;
    background-color: red;
    float: left;
}

#two {
    width: 33%;
    height: 970px;
    background-color: blue;
    float: left;
}


#three {
    width: calc((100% - 250px)/2);
    height: 10px;
    background-color: red;
    float: left;
}
#footer {
    width: 100%;
    height: 50px;
    background-color: green;
}