围绕可变大小内容的CSS不规则框架？

Apologies for this sketch, but seems to convey my question best:

为这个草图道歉,但似乎最好地传达了我的问题:

        +---------------+----------------+-----+
        |      div      |      v.div     |  d  |
        |               |                |  i  |
        +----+----------+----------------+  v  |
        | v  |                           |     |
        | .  |                           +-----+
        | d  |                           |  v  |
        | i  |            DIV            |  .  |
        | v  |         (content)         |  d  |
        |    |       variable size       |  i  |
        +----+                           |  v  |
        | d  |                           |     |
        | i  +------------------------+--+-----+
        | v  |          v.div         |   div  |
        +----+------------------------+--------+

I am trying to figure out the CSS for the 8 DIVs surrounding some variable sized content. Each of those DIVs has a background-image such that this will all look like a shape-cornered picture frame wrapping the center content. The outer and especially the corner DIVs also need to be transparent so some tricks I've used before for doing this don't work so well. Clearly the DIV's marked 'v.div' must expand to fill variable height and width; the corner DIVs are fixed-size.

我试图找出围绕一些可变大小内容的8个DIV的CSS。这些DIV中的每一个都具有背景图像,使得所有这些都看起来像包裹中心内容的形状角图框。外部,特别是角落DIV也需要透明,所以我以前用过的一些技巧不能很好地工作。显然,标记为'v.div'的DIV必须扩展以填充可变的高度和宽度;角落DIV是固定大小的。

With some image cutting and pasting, I could possibly restrict the problem to something like this, if the previous just can't be done:

通过一些图像剪切和粘贴,我可以将问题限制为这样的事情,如果之前的事情无法完成:

        +---------------+--------------+-------+
        |      div      |      v.div   |  div  |
        |               |              |       |
        +----+----------+--------------+-+-----+
        | v  |                           |     |
        | .  |            DIV            |  v  |
        | d  |         (content)         |  .  |
        | i  |       variable size       |  d  |
        | v  |                           |  i  |
        |    |                           |  v  |
        +----+---+--------------------+--+-----+
        |   div  |         v.div      |  div   |
        +--------+--------------------+--------+

Anyone ever done anything like this willing to share their solution or an alternative approach?

有没有人愿意分享他们的解决方案或替代方法?

3 个解决方案

#1

Could this not be solved by using a background colour/background image, padding and border?

这可以通过使用背景颜色/背景图像,填充和边框来解决吗?

<style>

#variableSize {padding: 1em;
               border: 3px solid #000;
               background-color: rgba(215,215,215,0.5);
               background-image: url(path/to/img.png);
               background-repeat: repeat;
               background-position: 0 0;
               -moz-border-radius: 2em;
               -webkit-border-radius: 2em;
              }

</style>

<div id="variableSize">
   <p>Variable size content.</p>
</div>

It has compatibility issues, I confess, but the use of rgba() could be replaced with just a (partially-) transparent png to assure some cross-browser support?

我承认它有兼容性问题,但rgba()的使用可以用一个(部分)透明的png替换,以确保一些跨浏览器的支持?

i don't quite understand how this css accomodates variable size content. I figure at a minimum there are 4 fixed image divs (the corners) and 4 repeating images (2 in X, 2 in Y). the real question is how to arrange the floats, and how to get the repeating divs to fill available space – Scott Evernden

I think I misunderstood the question, sadly. While my above example does/should work it wouldn't provide the image-corners you're after.

我想我很遗憾地误解了这个问题。虽然我的上述示例确实/应该工作,但它不会提供您所追求的图像角落。

If you use the above suggestion but contain images within the content to serve as the image corners then it might work:

如果您使用上述建议但在内容中包含图像作为图像角落,那么它可能会起作用:

<style>

#variableSize {padding: 1em;
               border: 3px solid #000;
               background-color: rgba(215,215,215,0.5);
               background-image: url(path/to/img.png);
               background-repeat: repeat;
               background-position: 0 0;
               -moz-border-radius: 2em;
               -webkit-border-radius: 2em;
               position: relative;
              }

#variableSize .topLeftImg
              {border: 0 none transparent;
               position: absolute;
               top: 0;
               left: 0;
               }

#variableSize .topRightImg
              {border: 0 none transparent;
               position: absolute;
               top: 0;
               right: 0;
               }

#variableSize .bottomLeftImg
              {border: 0 none transparent;
               position: absolute;
               bottom: 0;
               left: 0;
               }

#variableSize .bottomRightImg
              {border: 0 none transparent;
               position: absolute;
               bottom: 0;
               right: 0;
               }

</style>

<div id="variableSize">
   <img class="topLeftImg" src="path/to/image.png" />
   <img class="topRightImg" src="path/to/image.png" />
   <img class="bottomLeftImg" src="path/to/image.png" />
   <img class="bottomRightImg" src="path/to/image.png" />
   <p>Variable size content.</p>
</div>

The padding on the #variableSize would have to be equal to, or greater than, the width/height of the images. But should work? I'll try it tonight when I get home, if you don't try it first.

#variableSize上的填充必须等于或大于图像的宽度/高度。但应该工作吗?如果你不先试试,我今晚回家的时候会试试。

Okay, working demo up, over on: a site, somewhere. :)

好的,正在进行演示,现场,某个地方。 :)

#2

Maybe this could help: http://www.neuroticweb.com/recursos/3-columns-layout/?

也许这可以帮助:http://www.neuroticweb.com/recursos/3-columns-layout/?

Or this: http://www.tanfa.co.uk/css/layouts/css-3-column-layout-v1.asp

或者:http://www.tanfa.co.uk/css/layouts/css-3-column-layout-v1.asp

#3

I believe the desired effect can be achieved w/ one div and multiple backgrounds using CSS3. Width, height, and the last bg color can change but remember to declare the bg images in top layer priority order so in the below example topleft.png is "in front of" the other bg images.

我相信使用CSS3可以实现具有一个div和多个背景的预期效果。宽度,高度和最后一个bg颜色可以更改但请记住以顶层优先级顺序声明bg图像,因此在下面的示例中,topleft.png位于其他bg图像的“前面”。

Hope that helps!

希望有所帮助!

HTML

 <div class="myframedimage"></div>

CSS

.myframedimage { 
  width: 100%;
  height: 100%;
  background:
    url(topleft.png) top left no-repeat,    
    url(topright.png) top right no-repeat,       
    url(bottomleft.png) bottom left no-repeat,   
    url(bottomright.png) bottom right no-repeat, 
    url(top.png) top repeat-x,             
    url(bottom.png) bottom repeat-x,        
    url(left.png) left repeat-y,            
    url(right.png) right repeat-y,     
    url(image.png) center center no-repeat,
    #5d5d5d
}

http://jsfiddle.net/jlynchdotco/2Pkg6/