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

用户名

选项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;
}

How can i set the width of right and left spacer to (Browser width - Flash Content width)/2 Where the width of the flash content is static at 920px.

I'm not sure how to govern the width of the spacers.

Somehow the width of the spacers needs to be set to a size of (Browser width - flash content width)/2 In this example the static width of the flash content is 920px and the browser width is variable. so say the browser width is 1920px than the size of each spacer would be 500px per container. I would also set the minimum width of each spacer to 20px so they show up if the browser width is below a certain threshold.

Opetion 2

The other idea that i had was to create 1 container which housed the flashcontent

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

I dont know how to do this or even if its possible, but it would work

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

Here is a working JSFIDDLE

Updated code.

代码示例

  <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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章