I have a gradient drop shadow that uses two different images. One on each side. How can I setup my OutsideContainer to be relative to the Center in size? So, when the Center content expands OutsideContainer expands.
我有一个使用两个不同图像的渐变阴影。每边一个。如何设置我的OutsideContainer相对于中心的大小？因此，当Center Content扩展OutsideContainer扩展时。
This way my Gradients show on the whole content area.
这样我的Gradients就可以在整个内容区域显示。
.Left
{
background-image:url(themes/Light/images/BorderLeft.gif);
background-repeat:repeat-y;
float:left;
background-color:#FF0000;/*Colors work in place of having the picture*/
height:100%;
width:8px;
}
.Center
{
float:left;
background-color:#FFFFFF;
width:745px;
}
.Right
{
background-image:url(themes/Light/images/BorderRight.gif);
background-repeat:repeat-y;
float:left;
background-color:#00FF00;/*Colors work in place of having the picture*/
height:100%;
width:8px;
}
.OutsideContainer
{
margin:0 auto;
width:761px;
height:200px;
}
<body>
<div class="OutsideContainer">
<div class="Left"></div>
<div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div>
<div class="Right"></div>
</div>
</body>
1 个解决方案
#1
3
A better way of doing what you are trying to do is to give a padding to the outer box of the width of left and right remove the left and right divs and use a background image of both sides set to your set outer div width with a transparent background where the actual div goes. something like this:
做你想要做的更好的方法是给左边和右边宽度的外框填充，删除左右div，并使用设置为你的外部div宽度的两边背景图像实际div所在的透明背景。像这样的东西：
And the CSS would look like so:
CSS看起来像这样：
.Center
{
float:left;
background-color:#FFFFFF;
width:771px;
}
.OutsideContainer
{
padding: 0px 8px 0px 8px;
background: url('picture.png') repeat-y;
margin:0 auto;
width:761px;
overflow: hidden;
}
HTML:
HTML：
<body>
<div class="OutsideContainer">
<div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div>
</div>
</body>
This may be the only way to do this with css.
这可能是使用css执行此操作的唯一方法。
#1
3
A better way of doing what you are trying to do is to give a padding to the outer box of the width of left and right remove the left and right divs and use a background image of both sides set to your set outer div width with a transparent background where the actual div goes. something like this:
做你想要做的更好的方法是给左边和右边宽度的外框填充，删除左右div，并使用设置为你的外部div宽度的两边背景图像实际div所在的透明背景。像这样的东西：
And the CSS would look like so:
CSS看起来像这样：
.Center
{
float:left;
background-color:#FFFFFF;
width:771px;
}
.OutsideContainer
{
padding: 0px 8px 0px 8px;
background: url('picture.png') repeat-y;
margin:0 auto;
width:761px;
overflow: hidden;
}
HTML:
HTML：
<body>
<div class="OutsideContainer">
<div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div>
</div>
</body>
This may be the only way to do this with css.
这可能是使用css执行此操作的唯一方法。